Search code examples
cssgoogle-webfonts

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

Solution

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