Using Google Fonts on your website
- Search the Google Fonts library:
- 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.
- Check the styles you want to use, the fewer the better to keep the font size down.
- Scroll down to Add this code to your website section and select the <link> element.
- 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='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
- If you're using plain CSS styles add the following rule:
font-family: 'Roboto', sans-serif;
- 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