Fonts changing weight when uploaded to web server

Question

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.

Very curious! Are you sure the `` tags are also identical? You could be loading the wrong stylesheet on accident, perhaps. — Wander Nauta, May 16 '15 at 09:04
how you mentioned the fonts in css? either from local or from google fonts link — Karthik N, May 16 '15 at 09:15
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, May 18 '15 at 04:30
@KarthikN Can you offer any reasoning as to why this is happening? Don't forget: same files and same browser. — Mattypants, May 18 '15 at 11:18
@KarthikN If I see the font locally, it's "in my system". A moot point, however, since the font is a linked to Google font, right? — Mattypants, May 19 '15 at 13:34
yes of course... try with fontsquirrel.com and convert the font and let try with all browsers... it must be same for all browsers :) — Karthik N, May 20 '15 at 04:41

score 0 · Answer 1 · answered May 16 '15 at 09:12

0

Provide a font-weight by default as in

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

answered May 16 '15 at 09:12

Hello Universe

3,248
7
50
86

What's the difference in using a class or an H2 selector? – Mattypants May 16 '15 at 10:15
There is no difference. However, notice the font-weight is in number. If you say bold, different browsers will consider different numbers. So better to add a number. 700 is typical number for bold. – Hello Universe May 18 '15 at 09:23
I didn't specify bold anywhere. I specified only what is displayed in the inspector, i.e., font-weight: 600. Semibold and extrabold are only displayed as the 'Rendered Fonts', in the 'Computed' tab of the Inspector. – Mattypants May 18 '15 at 11:08

Fonts changing weight when uploaded to web server

1 Answers1

Linked