Rendering font on Mac leaves font "Regular" similar to "Bold"

Question

Rendering font on Mac leaves font "Regular" similar to "Bold"

Navigation

#1 by (1 votes)

1

I have a font rendering problem on the Mac. The font is of "Regular" size and renders right on windows, but on Mac the same font looks like "Bold". Windows is Seven and MAC is Yosemite.

I'm using this code:

@font-face {
font-family: 'open_sansregular';
src: url('font/OpenSans-Regular-webfont.eot');
src: url('font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('font/OpenSans-Regular-webfont.woff2') format('woff2'),
     url('font/OpenSans-Regular-webfont.woff') format('woff'),
     url('font/OpenSans-Regular-webfont.ttf') format('truetype'),
     url('font/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}

(I tried this in body and html, but the problem still continues)

body {
font-family: 'open_sansregular';
color: #939393;
font-size: 14px;
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
font-style: normal;
font-weight: normal;
}

And the fonts look like this:

1 - Windows, Chrome (Correct) 2 - Mac, Chrome 3 - Mac, Firefox

html css-font-face

asked by anonymous 20.03.2015 / 15:09

1 answer

Error while trying to select with PHPOO Why can not I run the file located in the bin?

score 1 · Accepted Answer

From what I know the Mac and Windows have different algorithms to calculate font size, if dealing with a Web font the situation still gets more complicated.

Anyway you can use the following CSS code

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

This should make fonts look more uniform across platforms.