Fonts changing weight when uploaded to web server

2
votes

I'm using the Google font 'Open Sans', and while it seems to be displaying properly on my local machine's Chrome browser, the font is much bolder when I view the same page uploaded to my web server.

Inspecting the element (an H2) styles in Chrome both locally and on the server, shows:

  • font-family: 'Open Sans', sans-serif, Arial;
  • font-weight: 600;

However, looking at the 'computed' tab of the Inspector, and scrolling down to 'Rendered Fonts', I see 'Open Sans Semibold—55 glyphs' locally, and 'Open Sans Extrabold—55 glyphs'on the server.

1
htmlcssgoogle-chromefonts
Very curious! Are you sure the <link> tags are also identical? You could be loading the wrong stylesheet on accident, perhaps. - Wander Nauta
how you mentioned the fonts in css? either from local or from google fonts link - Karthik N
@KarthikN Google fonts - Mattypants
@WanderNauta Same files - Mattypants
Then obviously the output from the web server is correct one. If you want the font style is common for all browsers, you may try to get the fonts from fontsquirrel.com and generate the css for the font - Karthik N

1 Answers

0
votes

Provide a font-weight by default as in

.myClass{
   font-family:'Open Sans';
   font-weight: 700;
}