Using Google Fonts on your website

  1. Search the Google Fonts library:
  2. Click on the Quick-use icon, or click Add to Collection button, then press the Use tab.
    Note: If you're wanting to load multiple fonts, then you should use the Add to Collection button as that will group fonts into one link (request) which should load quicker.
  3. Check the styles you want to use, the fewer the better to keep the font size down.
  4. Scroll down to Add this code to your website section and select the <link> element.
  5. In your web page or template, paste the copied link element at the top of your <head> block:
    Note: Loading the font prior to the CSS is a good way to speed things up.
    <link href=',700,400italic,700italic' rel='stylesheet' type='text/css'>
  6. If you're using plain CSS styles add the following rule:
    font-family: 'Roboto', sans-serif;
  7. If you're using Sass CSS, then its a good idea to create a variable to hold your font so that if you decided to switch font's you only have to do it once.
    $fontBody: 'Source Sans Pro', sans-serif;

7 Tips to Load Google Web Fonts Faster