CODEWITHSUNDEEP
cssgoogle-webfonts
Ole
Ole

Reputation: 47058

What are all the font weights available for google fonts?

For example I could do an import like this:

@import url(http://fonts.googleapis.com/css?family=Roboto:100,400,900);

But could I also do one like this and would it make sense (Are the only valid values 100, 400, 900)?

@import url(http://fonts.googleapis.com/css?family=Roboto:100,200, 300, 400,500, 600, 700, 800, 900);

Upvotes: 2

Views: 2010

Answers (3)

rodelm
rodelm

Reputation: 341

Depends on what is generated when you select a Font enter image description here

This is generated when you select weights: enter image description here

Upvotes: 1

saiibitta
saiibitta

Reputation: 407

May be this answer suitable to you

please go through this link

Specifying Style and Weight for Google Fonts

Upvotes: 1

Gary Holiday
Gary Holiday

Reputation: 3582

It depends on the font. If you are at Google Fonts and you select a font. Then select the family selected in the bottom right, then click the tab that says customize you can see all the font weights that the font will support.

Your current example is exactly how it will look if those font weights are supported. Here is roboto with all the possible font weights and styles.

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

The i stands for italic

To use these fonts you then do

.this-is-my-class {
    font-family: 'Roboto';
    font-weight:100; // or 100 - 900
    font-style: italic; // or normal 
 }

Upvotes: 2

Related Questions