148

I am using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Example: http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans

I am importing three faces, Normal, Bold, ExtraBold via the link tag. The normal face displays correctly, but I cannot figure out how to use the variants of the font in my CSS

I tried all of the following as attributes for font-family but no dice:

  • 'Open Sans Bold'
  • 'Open Sans 700'
  • 'Open Sans Bold 700'
  • 'Open Sans:Bold'

The google docs themselves do not offer much help. Anyone have an idea of how I should write my CSS rules to display these variants?

Steven Garcia
  • 2,814
  • 2
  • 24
  • 12

7 Answers7

208

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'>
Charming Robot
  • 2,460
  • 2
  • 17
  • 34
Marco Johannesen
  • 13,084
  • 6
  • 31
  • 36
  • 63
    this is partial truth, and is because if you dont assing the weight on the link css google wont download the proper "bold" format to achieve this you have to declare the "link href" as follow: – ncubica Jan 30 '12 at 03:06
  • 4
    Is there any way to make the browser use weight 600 for old my old rules of "bold"? I think the 700 is too thick and don't want it anywhere on my site. – Nic Cottrell Jan 16 '13 at 10:35
  • What do you mean? I guess you should just change the bold to being 600?. Do you mean changing "bold" behaviour on `` and ``? – Marco Johannesen Jan 16 '13 at 11:56
  • 2
    I am using @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300); as i cant access the html, and when i try and use the following... font-family: 'Open Sans', sans-serif; font-weight: 300; it doesnt change the font weight. ideas? – Tony Ray Tansley Nov 11 '15 at 14:01
  • @TonyRayTansley do you have it on the first line of the CSS file? :I – Marco Johannesen Dec 06 '15 at 11:48
  • 2
    So then if I can use normal CSS for this, why does Google let me decide which weight I want to use? – dawn Dec 19 '18 at 05:13
  • @MarcoJohannesen For the imported google font, do we have to specify font-weight? or it will default to something? – Giorgi Moniava Jan 30 '22 at 19:17
  • Had to prefix the fonts.googleapis.com with https:// otherwise browser assumed it was on my site and got a 404 – David Pierson Aug 17 '22 at 12:09
31

Here's the issue: You can't specify font weights that don't exist in the font set from Google. Click on the SEE SPECIMEN link below the font, then scroll down to the STYLES section. There you'll see each of the "styles" available for that particular font. Sadly Google doesn't list the CSS font weights for each style. Here's how the names map to CSS font weight numbers:

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Extra-Bold      800
Black           900

Note that very few fonts come in all 9 weights.

Ely
  • 8,259
  • 1
  • 54
  • 67
NetFool
  • 571
  • 1
  • 6
  • 11
12

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

For light: font-weight : 100; Or font-weight : lighter;

For normal: font-weight : 500; Or font-weight : normal;

For bold: font-weight : 700; Or font-weight : bold;

For more bolder: font-weight : 900; Or font-weight : bolder;

Pramesh Bajracharya
  • 2,153
  • 3
  • 28
  • 54
  • Great. But can the font be lighter than font-weight : 100 ? – John Max Jul 21 '16 at 09:07
  • 3
    No, minimum value is 100 only and maximum value is 900. –  Jul 25 '16 at 12:34
  • 4
    This is not correct, the following values are to consider: `light: font-weight: 300;` `normal: font-weight: 400;` `semi-bold: font-weight: 600;` `bold: font-weight: 700;` `extra bold: font-weight: 800;` – geraldo Nov 18 '18 at 10:57
5

The API has been updated, now you have to import the desired font-weight using ":wght@700"

Ex: "https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap"

source: https://developers.google.com/fonts/docs/css2

Laurent
  • 119
  • 3
  • 6
3

In case anyone is looking for latest format with multiple font families + weights, see below (ex. w/ Open Sans + Roboto)

https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,800&family=Roboto:wght@500&display=swap

Note that the latest version of google fonts web interface has bad UX for displaying the code sample. There is a 'selected families' panel which displays and then disappears, and it overlaps the font variations 'add' buttons (the plus / minus signs), which are also located on the right. The solution, which is not intuitive, is to reload the page.

coreyl
  • 67
  • 1
  • 10
2

you can use the weight value specified in the Google Fonts.

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}
Ritam Das
  • 183
  • 1
  • 3
  • 12
0

I experienced a similar problem in lec 72 of angela yu's course and we have to define the font-weight along with font-family

h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
 }
Suchint
  • 251
  • 2
  • 6