CODEWITHSUNDEEP
htmlcssfonts
Julian
Julian

Reputation: 965

Google Font Weight 300 not working

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: enter image description here This is how it looks in my chrome: enter image description here

Upvotes: 10

Views: 8272

Answers (4)

Alex Howes
Alex Howes

Reputation: 454

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.

Upvotes: 0

Rakesh Kumar
Rakesh Kumar

Reputation: 21

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

Upvotes: -1

Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

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;
   }

Upvotes: 1

Sudarshan Kalebere
Sudarshan Kalebere

Reputation: 3929

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.

Upvotes: 7

Related Questions