: Font renders differently on my laptop than on colleagues laptops I'm using <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet"> Or https://fonts.google.com/specimen/Raleway

@Radia289

Posted in: #FontManagement #Fonts #WebFonts

I'm using

<link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">


Or
fonts.google.com/specimen/Raleway
font-weight:400 is the base, regular font weight. On my desktop at home (windows) and my colleagues laptops (OSX) this font + font-weight:400 renders as expected:



However, on my laptop (OSX, El Capitan) in every browser (chrome/safari/firefox) font-weight:400 renders as font-weight:700 (bold):



I've checked my local fonts and afaik, Raleway is not a locally installed font.

Here are the styles being applied to it:

a {
text-transform: uppercase;
color: #FFF ;
font-weight: 400;
font-size: 12pt;
text-decoration: none;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}


Any ideas?

EDIT
I added

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;


This changed the font appearance, though not to the actual font-weight:400 style as far as i can tell:



EDIT 2:

Here is another example of the body font which is Raleway & font-weight:400 in the visual design image and the same section with same font/font-weight from my browser:

Vote Up Vote Down

Login to post a comment!