Why host your Google fonts locally?
Hosting your Google Fonts on your own web server, instead of making use of Google Content Delivery Network (CDN), has some advantages:
- In most cases it will make your website faster (this does depend on the location of your server and the location of the user though)
- Your website doesn’t have to do an extra server request to load the font. This saves energy, making your Drupal website more sustainable
- The font is not dependable on a third party. The fonts will always be loaded even when Google has a disruption to their services
- Because you host your own fonts and corresponding CSS files you have more control on how to cache them.
Step by step guide on how to host Google Fonts locally in your Drupal theme
Let’s dive straight in:
- First you need to download the Google Fonts you want to use in your custom Drupal theme with help of the google-webfonts-helper tool
- Pick the desired font on the left hand side
- Choose the charset and styles you want to use for this font. Only select what you need to keep the size files as small as possible
- Copy the CSS that is automatically generated based on your preferences
- Download the fonts by clicking on the blue button containing the name of the font
- Unzip the file on your desktop
- Open up your (S)FTP editor and navigate to the root of your Drupal installation (or use the file browser if you work with a local Drupal installation)
- Navigate to /themes/your_custom_theme/
- Create a new folder called fonts
- Place the font files of the extracted zip file in the newly created fonts folder
- Navigate back to /themes/your_custom_theme/ folder and locate the main CSS file for your theme (usually located at /themes/your_custom_theme/css/style.css)
- Paste the code you’ve copied in step 4 at the top of this file
Et voila. Your fonts are now hosted locally. You can now use your Google fonts by declaring the font-family in your CSS file.
P.S: Don’t forget to remove the link to the Google Fonts CDN in your header if you used to host them this way.
Do you have any questions about this little tutorial? Please let me know by leaving a comment. Also don’t forget to subscribe to my Drupal newsletter :)