Google Font Weight 300 not working

Question

Can't get the 300 weight in google fonts open sans working in Chrome or Chrome Canary.

I already tried this and this in a codepen, to no avail. Works fine in edge.

HTML

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet">
<div class="header-pic text-align-center">
  <h1>We make dream places <br> affordable for you.</h1>
</div>

CSS

body {
    font-family: 'Open Sans', sans-serif;
}
.header-pic h1{
    font-size: 80px;
    font-weight: 300;
}

Any ideas?

Edit: For clarification, not working means not showing a difference between 300 and 400. Added screenshots.

Added a comments screenshot and codepen because it shows the indifference clearer.

http://codepen.io/anon/pen/YWVLYE This is how its supposed to be: This is how it looks in my chrome:

Define "not working". It looks to be working in your example for me in Chrome — Turnip, Jul 01 '16 at 12:40
I've been having this problem too whilst running locally. I thought it was just my eyes at first. Here's a modified version of OP's Codepen demo which shows both next to each other: http://codepen.io/anon/pen/YWVLYE. Here's a screenshot from Chrome: http://i.imgur.com/dpIDEM4.png — James Donnelly, Jul 01 '16 at 12:46
updated with screenshots @JamesDonnelly yup, thats exactly what im having. — Julian, Jul 01 '16 at 12:52
Strange. This is what I see in @JamesDonnelly's example http://i.stack.imgur.com/mbi0I.jpg — Turnip, Jul 01 '16 at 12:59
Do you by chance have the Open Sans font installed on your computer? Perhaps this is interfering? Edit: related - http://stackoverflow.com/questions/31255245/google-fonts-font-weight-of-100-is-not-working — Turnip, Jul 01 '16 at 13:01
@Turnip I don't have it installed myself. Interestingly, the version used on Google's Fonts portal works fine for me: https://fonts.google.com/specimen/Open+Sans. — James Donnelly, Jul 01 '16 at 13:06
try adding !important after the 300 as it might be getting blocked by google stylesheet, like so `font-weight: 300!important;` — Artem Ankudovich, Jul 01 '16 at 13:08
!important didnt work sadly. Also google calls the font with font-family: "Open Sans script=all rev=1", "Adobe Blank"; — Julian, Jul 01 '16 at 13:26
@Julian can you please update your post to make it more obvious what you're experiencing as "different", because from your links and screenshots there is no clear difference, and feels like a problem asked a thousand times on Stackoverflow already. How does your question differ from those questions already asked and answered? — Mike 'Pomax' Kamermans, Jul 02 '16 at 19:48
@Mike'Pomax'Kamermans the problem is that there is no difference where should be (as discussed above). Added JamesDonnelly's screenshots. I looked up several of the others proposed solutions and they didnt work. (see my op) — Julian, Jul 03 '16 at 21:06
@Julian can you rework your text and perhaps merge your images so that it's *obvious* what the difference is supposed to be, *and* what you are seeing (based on many people saying things work for them, this is strong evidence that either your explanation is insufficient, or you're misunderstanding, which is secretly also evidence that your explanation is insufficient) — Mike 'Pomax' Kamermans, Jul 05 '16 at 03:51
Have you tried font smoothing (-webkit-font-smoothing: antialiased;) if it makes any changes? — MichalCh, Jul 05 '16 at 08:04
Might be a duplicate of this question: http://webmasters.stackexchange.com/questions/72716/google-open-sans-font-does-not-display-correct-weight-in-google-chrome. — Mr. Hugo, Jul 05 '16 at 10:57
@Mike'Pomax'Kamermans I updated the question to make it more obvious. — Julian, Jul 05 '16 at 11:16
I do have the exact problem! I think it's caused because I have Open Sans installed on my PC. — Etienne Dupuis, Jan 16 '17 at 15:56

Sudarshan Kalebere · Accepted Answer · 2016-07-04T06:49:31.983

I think you should start it from scratch, goto google fonts, search for opensans fonts then select what all type you want, then download the zip. Once you download the zip file go to fontsquirrel, upload this zip file in font generater section then you will get fonts unzip them and add them to fonts folder in your project then you can include code given in styleshit.css, in zip file from https://www.fontsquirrel.com/tools/webfont-generator, it will look something like this.

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

...and so on all fonts type which you selected from google fonts. while adding font family just add font-family:'open_sansregular'; I found this is the best solution to avoid all overheads and browser compatibilities, thank you.

Tip : I found many times if you give direct links to fonts using cdn then it may fail to load also some browsers will not get font family you type. So including fonts in your project always helps.

worked! Maybe if you could update your answer, to reflect that you have to call those fonts individually and not by weight. — Julian, Jul 05 '16 at 11:28
But note that this is based on a webfont loading pattern that no longer applies: `eot` is not used anymore except by IE8 and below, `svg` is a format that is no longer maintained, and has actively been removed by most major browsers, and WOFF is a byte-for-byte wrapper around `ttf` and `otf` sources, with every browser that supports ttf/otf also supporting WOFF (so there is no reasong to load both). For modern browsers, load WOFF (and WOFF2 if you need it, but it's still not well supported), and if you really need IE8- support, add `eot`, and that's the only two you need. — Mike 'Pomax' Kamermans, Jul 05 '16 at 20:40

score 1 · Answer 2 · answered Jul 04 '16 at 07:32

1

Try adding the following css in body:

body{
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;
    font-smooth: always;

    font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
   }

answered Jul 04 '16 at 07:32

Sanjeev Kumar

3,113
5
36
77

I see the first paragraph with light text and second paragraph with little bold than first. – Sanjeev Kumar Jul 05 '16 at 11:18

score 0 · Answer 3 · answered Jul 05 '16 at 11:25

The example is showing fine for me. 300 is using Open Sans Light and 400 is just using normal 'Open Sans'.

To check this I right clicked on the headings, inspected element and on the styles section of chrome Dev tools, clicked computed and there's a section that shows what font it's using and whether it's using a local file or a networked file. When I view it it's using Local File.

This way you can see whether it's the Google Font not loading in or a local file overwriting the networked file.

Sorry this is not a fix but a way you might be able to debug it better.

score -1 · Answer 4 · answered Jul 05 '16 at 07:52

-1

http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

you ca use

font:300 12px/18px arial

answered Jul 05 '16 at 07:52

Rakesh Kumar

21
1

Google Font Weight 300 not working

4 Answers4

Linked