Sometimes you’ll need/want to use custom Google fonts in your website build. Some developers may be embedding fonts using the @import method.
Example, adding this to the top of the CSS file:
@import url('https://fonts.googleapis.com/css?family=Lato');
While that is still a viable way of doing it, it’s not the most ideal.
Currently, the best way is to use the “standard” <link> method. Example, adding this via Header Footer plugin, in the <head> section:
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
Here is a basic rundown of how to do it:
- Find the Google Font you want.
- E.g., https://fonts.google.com/specimen/Lato
- Click “Select This Font.”
- Click the “Customize” tab in the popup window.
- Select only the weights you will need/use.
- Click the “Embed” tab.
- Copy the <link>.
- E.g., <link href=”https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i” rel=”stylesheet”>
- In your build, go to Settings > Header and Footer > Head Section Injection.
- Paste your <link> into this section.
- Click Save.
- Now you can reference your font-family in your CSS.
- E.g., .classname { font-family: ‘Lato’, sans-serif; font-weight: 700; }
Keep in mind, it’s ideal to only pull in the font weights you know you’ll need. Don’t just select ALL of them, when you know you won’t use some of them.
As an example, this is a bit excessive:
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
There is a good chance that the 100, 200, 800 and 900 weights wouldn’t be used. So you’re slightly causing the size of the file to increase by requesting those weights from Google. But it’s your call as a developer.
Lastly, just a tip, if you are using multiple Google Fonts, you can of course add multiple <links>:
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sarpanch:400,700" rel="stylesheet">
But that’s now technically two calls to Google’s servers.
Instead, you could do:
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,700,700i|Sarpanch:400,700" rel="stylesheet">
Google will automatically do that for you, if you select multiple fonts at the same time through the Google Fonts website.
