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 :)
Comments
An additional benefit of local fonts is that Google loses one additional way of tracking your site visitors.
Great point pidium, thanks for sharing!
Nice article, although there's a "load" missing in the first paragraph ("… will load faster …").
In addition, avoiding any link to non-EU servers is mandatory for EU sites.
I suggest not to use the CSS as generated, but instead using a "proxy-fontname" -- it's a lot easier to change fonts later. In the same sense I prefer linking the font.css to the main.css instead of pasting the code. F.e. I use to have my font-sets named:
basic-font - header-font - callout-font throughout the CSS, and for the font.css I link the actual font to the proxy. I use to keep all fonts-files of a family in the font directory, linking only the fonts I really need for a certain site. This way it's much easier to test certain weights.
I also don't like to put font files into the themes folder -- I prefer treating fonts as 'unrelated resources' which can be used by various themes, especially in a multi-site setup. So most of my installations have font's installed in files/fonts.
Finally, the sad part of the story is that there are fonts which cannot be downloaded, such as Noto Sans KR (Korean) -- latin fonts in general seem to be fine.
Thanks, nofue. Fixed the first paragraph.
Do you mean using CSS variables? They are indeed a great way to maintain the font declarations in your CSS. I use them as well, but left them out of this tutorial to make it simpler to understand :)
A valid point about not keeping fonts in the theme folder. I occasionally have to deal with multisite set-ups, so for my next projects I will follow your example.
Great article, thanks!
There is an additional advantage, which is really a subset of your second argument: If your site loads over HTTP/2 or HTTP/3, then avoiding the new server request is sidestepping an actual antipattern, and your site speed gets a more pronounced boost than under the older HTTP 1.1 protocol. HTTP/2 and HTTP/3 use multiplexed streams of data over the same connection, and the font file becomes just one more resource that is multiplexed onto that stream, which is already going at full speed. No connection cost, no TCP ramp-up cost, nothing else, just the raw time it takes to transmit the font file.
Glad you enjoyed it, Chris! Your HTTP argument goes a little bit over my head, but I believe you :) Can you maybe share some resources about HTTP so I can catch myself up?
Hello! Thanks for your very helpful article.
The only thing I don't understand is how I find it to remove the link to the Google Fonts CDN in my header.
Hi stefania,
Most likely this line of code will be included between the head tags in the html.tpl.php file in your theme folder.
Thanks Robert for this tutorial...
Especially for european sites to fulfill the gdpr regularities - very helpful.
An equal tutorial "how to host fontawesome locally on drupal" would be nice too...
Thanks for your work.
Glad I could help :)
I'll think about your tutorial idea which might be a good addition.
Hi,
I followed your instructions but there are still some goole fonts being loaded in the html header - can you help me to identify the issue - is it CDN and if so how to get rid of that?
Sachverständigenbüro Haase |
@import url("https://sv-haase.com/modules/system/system.base.css?rkbnd6");
thanks a lot
Hi Stefan,
You need to remove this line from one of your theme files (probably html.html.twig):
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet" type="text/css">
Or you need to uninstall a module which injects this line, such as https://www.drupal.org/project/google_webfonts_helper