Search code examples
cssgoogle-font-api

Are weights necessary when importing google fonts?


Some google font imports look like this:

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

Are the 400, 100, 900 weights necessary?

Or could one just perform the import like this:

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

And style the element like this:

element {
    font-weight: 900;
    font-family: Roboto;

}

Solution

  • Yes, they are required if you want to use them.

    If you do directly to the following URL (the one you used as an example).

    http://fonts.googleapis.com/css?family=Roboto
    

    You'll see something like so...

    /* latin */
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
    }
    

    However if you add the weights to it, you see this...

    [...]
    
    /* latin */
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
    }
    
    /* latin */
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      src: local('Roboto'), local('Roboto-Regular'), url(http://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
    }
    
    [...]
    

    If you don't specify the weights at the end of the URL, if you try and use the font and set a custom weight (anything other than 400) then it simply will fallback to the default weight and the font won't change.

    So if you intend to only use the 400 weight, then leave them, but if you want to use thin and bold versions as well, you need to include them in the URL. Including extra weights will increase font load times though, so only include what you intend on using.