How to use variants of Google fonts for web typography

Use 'font-weight:800;' for Extra Bold.

The 100–900 values roughly correspond to the following common weight names:

100 — Thin / Extra Thin / Hairline
200 — Extra Light / Ultra Light
300 — Light
400 — Regular (Normal)
500 — Medium
600 — Semi Bold / Demi Bold
700 — Bold
800 — Extra Bold / Ultra Bold
900 — Black / Ultra Black / Heavy
I’m not entirely sure what you’re doing, but you can implement Open Sans much easier. Add this under the meta tags at the top of your HTML:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800" rel="stylesheet">

To use the different weights, specify them in the CSS:

p {

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

}

.light {

font-weight:100;

}

.semibold {

font-weight:600;

}

.extrabold {

font-weight:800;

}

Note that if you want to add Light and Semibold, you will have to add ‘100’ and ‘600’ in the reference link (and add an ‘i’ if you want to use the italic of that weight), like so:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800" rel="stylesheet">
Now, when you use the paragraph tag (<p>), your text will transform into Open Sans. When you use the bold tag (<b>) within the paragraph tag, your text will be set in Open Sans Bold (but again, you will have to add ‘700’ to the reference link). The bold attribute is inherent to the bold tag and thus doesn’t need to be specified in the CSS.

But the other weights will have to be specified, as I did above. Then use <p class="extrabold">Text</p> or <span class="extrabold">Text</span> to make use of the extra bold weight. Alternatively you can add the class to your divs, or define the font weight in the CSS of the divs.

If you plan on using Extra Bold instead of Bold and no other weights except for the regular weight, I can recommend using the following method:

b {

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

font-weight:800;

}

And then just use the <b> tag like you would normally.