Font Weight with Google Fonts Roboto, Normal (400) and Bold (700) Work, Light (300) Does Not

Font Weight with Google Fonts Roboto, normal (400) and bold (700) work, light (300) does not

Your link uses the https protocol.

http vs https - for a protocol agnostic reference, use //fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700|Roboto:400,300,700,500,100

Basically your link uses https but you're referencing the http version of the font. So if you use https - it's a secure page, and as such, it will block non secure resources (especially from 3rd party websites), such as javascript. Or at least may display a warning, explaining that the site is trying to load non-secure content.

Roboto font in bold weight is invisible

If you use Google Fonts

<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">

without a fallback font like;

body {
    font-family: "Roboto";
}

b, strong {
    font-weight: 700;
}

You should provide that font-weight in your Google Fonts link like;

<link href="//fonts.googleapis.com/css?family=Roboto:500,700" rel="stylesheet" type="text/css">

Or, you should provide a fallback font;

body {
    font-family: "Roboto", sans-serif;
}

By doing so, if your browser can't find the font-weight: 700; Roboto font, it can use a suitable sans-serif font from your system.

In ideal situations, using a font-family to support all possible computer systems like;

body {
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

will solve all of these problems.

Google Font Weight 300 not working

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.

Why is google font weight not working?

The font-weight property is set to 500 in the bootstrap css file onto the following elements:

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6

If you want to set the font-weight of an element, you need a selector which is more specific than the default selector (of bootstrap). If you e.g. write a more specific selector like .container-fluid h1 { font-weight: 100; }, you will see, that it affects the element. You could even use the highly non-recommended !important after the CSS rule to override more specific CSS rules.

It is however not reasonable to overwrite all styles of a page with the same font-weight. Usually, e.g. titles have a different font-weight than regular text.

EDIT: In your example, however, you could simply use the h1 selector to select all <h1> elements instead of selecting the .h1 class. You probably made a mistake there. If you have the same specificity of the selector, the order of the CSS stylesheets is relevant. The styles of bootstrap are included before your custom styles, so your custom styles override the bootstrap styles.

Specifying Style and Weight for Google Fonts

They use regular CSS.

Just use your regular font family like this:

font-family: 'Open Sans', sans-serif;

Now you decide what "weight" the font should have by adding

for semi-bold

font-weight:600;

for bold (700)

font-weight:bold;

for extra bold (800)

font-weight:800;

Like this its fallback proof, so if the google font should "fail" your backup font Arial/Helvetica(Sans-serif) use the same weight as the google font.

Pretty smart :-)

Note that the different font weights have to be specifically imported via the link tag url (family query param of the google font url) in the header.

For example the following link will include both weights 400 and 700:

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

For CSS2

<link href='fonts.googleapis.com/css2?family=Comfortaa:wght@400;700'; rel='stylesheet' type='text/css'>

Can't load specific Roboto font

It depends on which font you have from google, in this case:

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

You approach to each font weight in CSS like that:

// 300 weight
.text {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

// 400 weight
.text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

// 700 weight
.text {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

Why is the default font weight 400?

Not "400 what", just 400. As per the CSS specification, first formalized in https://www.w3.org/TR/CSS1/#font-weight. there are nine levels of font weight, represented as unitless numbers, starting at 100 and ending at 900, in 100 increments.

In addition to this, the spec defines two mappings between numerical value and string value:

• the numerical value 400 and the string value normal are the same thing, and
• the numerical value 700 and string value bold are the same thing

(Note that while CSS4 will change this to allow for the numbers 1-1000 in increments of 1, it will still only officially recognise the string values normal and bold, still mapping to 400 and 700 respectively. See https://drafts.csswg.org/css-fonts-4/#font-weight-prop for more information)

The only formal rules around these weights is that if you're using a font family in CSS context, a font weight of 400/normal should get you whatever is that font family's Regular typeface, and a font weight of 700/bold should get you whatever is the font family's Bold typeface. Anything else is left entirely undefined, and all you know is that 100, 200, and 300 are probably lighter than 400, 500 and 600 are probably in between regular and bold, and 800 and 900 are probably heavier than 700.

All of those are qualified as "probably" because @font-face gets to completely invalidate everything about this. If you use @font-face, you overrule CSS's rules for what those numerical values mean entirely. For example: this rule will effect an ultra-thin font when you set font-weight to 900, because that's what we're telling the browser it must do:

@font-face {
  font-family: MyFont;
  font-weight: 900;
  src: url("./fonts/ultra-thin.woff2") format("WOFF2");
}

Also important to know is that these are the only two official number/string mappings. Officially there are no other mappings, and the table of numerical values in https://drafts.csswg.org/css-fonts-3/#font-weight-prop is there purely to illustrate which real CSS values map to which rough names people tend to use for them.

The most important part is that this only applies to CSS. It has nothing to do with actual font-stored values, or things you see in word processing software, etc.

How to use Roboto Light/Thin from google fonts in Chrome

First of all — avoid using !important. There is very limited number of scenarios when this is actually necessary.

Roboto and Roboto Condensed are provided as two separate font families by Google Fonts, so if you want to use the condensed version, you will have to declare font-family: "Roboto Condensed" as the condensed variant is not included in the Roboto font family.

Roboto Condensed has also a more limited amount of font weights available: 300, 400 and 700 compared to Roboto's 100, 300, 400, 700 and 900. Simply speaking, using font weight of 100 and 900 will not work with Roboto Condensed, and will fallback to the nearest possible font-weight.

How can you confirm that Roboto Condensed is not using the 300 font weight? It seems to be working fine with me (I'm also using it on a few sites)... also working fine in this fiddle: http://jsfiddle.net/8k72a/1/

Therefore, it is not possible to get Roboto Condensed with a font weight of 100, for example.

---

With your updated question, why not use this script instead? I see that you have broken your CSS styles into several lines — remember to escape the linebreaks in JS with a backslash \:

var css = '@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese);\
           @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic,greek-ext,greek,vietnamese);\
           @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700&subset=latin,latin-ext,greek-ext,greek,vietnamese,cyrillic,cyrillic-ext);',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

---

Related Topics