CODEWITHSUNDEEP
htmlbrowserfonts
xnx
xnx

Reputation: 25478

What would cause a web font to look different on Windows and a Mac?

I am using IBM Plex, loaded from Google Fonts with:

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i,400,400i,700,700i" rel="stylesheet">

I am using Bootstrap 4 and my customizing stylesheet (loaded after the bootstrap.min.css one) says:

body {
  font-family: 'IBM Plex Sans', sans-serif;
}

Yet I get a consistently different look, no matter which browser I use, between Mac:

enter image description here

and Windows 10:

enter image description here

The weight seems different and the character heights are not the same, even though the font is the same one. How can I ensure the Windows version looks more like the Mac one?

Upvotes: 0

Views: 700

Answers (1)

Anca Mihaela
Anca Mihaela

Reputation: 101

The thing is that there are differences in the way each platform renders fonts. Some fonts render the same on all platforms, but some don't, so you won't be able to avoid this.

Usually the safest fonts to be used are: Arial, Times New Roman, Helvetica.

Sometimes, for some fonts, I used these css properties to normalize the fonts, and they look the same, but it depends on the font:

-webkit-font-smoothing: antialiased; font-weight: normal;

I hope it helps.

Upvotes: 1

Related Questions