Table of contents.
Google Fonts is a massive library of 1,400+ open source font families for the web. And this massive catalog of web fonts is 100% free, including for commercial use. Everything from font license to hosting has been taken care of for you, ensuring the latest and greatest version of Google Fonts will always be available online for free.
However, things can get fairly tricky if you want to use Google Fonts in practice.
The problem with Google Fonts.
GDPR and privacy concerns.
In Jan 2022, a German court ruled that websites which embed fonts hosted by Google are in violation of the European General Data Protection Regulation (GDPR), and handed out a €100 fine to an unidentified website.
The reason for the ruling is that the website visitor’s IP address was passed to Google without authorization from the visitor. And the website does not have a legitimate reason for doing so, particularly because it is possible to provide Google Fonts to visitors without having them connect to external servers (i.e. Google).
Since the website revealed the visitor’s personal data (i.e. IP address) to a third party (i.e. Google) without consent, it is considered a violation of user privacy, and is consequently a violation of GDPR.
It used to be common practice for websites to embed fonts hosted by Google directly into their pages. After the ruling, however, people started recommending website owners to self-host Google Fonts on their own servers to avoid running afoul of EU rules.
The need for multiple font formats.
Google Fonts comes in 5 different file formats:
- Embedded OpenType Fonts (EOT or .eot)
- Scalable Vector Graphic Fonts (SVG or .svg)
- TrueType Fonts / OpenType Fonts (TTF or .ttf / OTF or .otf)
- Web Open Font Format (WOFF or .woff)
- Web Open Font Format 2.0 (WOFF 2.0 or .woff2)
You can find out more about each of these formats on W3Schools.
WOFF 2.0 is the latest open font format for the web, and it is supported by most modern browsers. But if you need to provide support for ALL browsers, especially some of the older ones, all five formats are required because there is no single one that works in all browsers.
This is usually not a problem because Google Fonts will automatically deliver the format suitable for your visitor’s browser. But it does become an issue if you have to comply with GDPR and need to host the font locally on your own server.
How to use Google Fonts in online projects.
Option 1: Fetching the font remotely from Google.
Google Fonts provides you with a fairly easy way to use them in your own web projects – by telling your visitor’s browser to fetch the latest font files directly from Google’s servers.
Simply visit fonts.google.com and click into any font of your choosing. For the purpose of this article, I will be using the “Kenia” font as demonstration.
Next, choose a font weight by clicking on the blue “Select” option, and then click on the “View selected families” icon in the top right (three squares and a plus sign).
Google Fonts will generate the CSS code required to embed your selected font.
By adapting some of the code provided by Google Fonts thusly,
<style>
@import url('https://fonts.googleapis.com/css2?family=Kenia&display=swap');
</style>
<p style="font-family: 'Kenia', cursive; font-size: 2.6rem; text-align: center;">
aA bB cC dD eE fF gG hH iI jJ kK lL mM nN oO pP qQ rR sS tT uU vV wW xX yY zZ
</p>I can use the “Kenia” Google Font without hosting it myself as shown below:
aA bB cC dD eE fF gG hH iI jJ kK lL mM nN oO pP qQ rR sS tT uU vV wW xX yY zZ
It’s all pretty straightforward. You just need to know a teensy bit of HTML and CSS.
And you do not need to worry about font formats, because Google Fonts will provide the format suitable for your visitor’s browser automatically.
The downside to option 1 is that it is NOT privacy-friendly. The visitor’s IP address will be revealed when their browser sends a request to Google for a font file.
Option 2: Download the font files and host it yourself.
If you need to comply with GDPR and/or other privacy regulations, this option is probably your best bet. However, it also comes with a different issue: Google Fonts has 5 different file formats, but there is no easy way to obtain most of them.
When you attempt to download a font family from fonts.google.com, you will only receive a ZIP file containing a single font format: TTF.
TTF is a relatively old font format developed for use in operating systems, and it is ill‑suited for the modern web due to its large file size. TTF is useful if you want to install and use the fonts locally on your computer, but that’s about all you can do with it.
What you really need for modern web projects is the latest WOFF 2.0 format, and maybe WOFF as a fallback for slightly older browsers like the Internet Explorer 11.
Problem is, there is no easy way to obtain these formats from Google Fonts.
Fortunately for us, a software engineer by the name of Mario Ranftl took matters into his own hands. By building upon the Google Web Font download script written by Clemens Lang, Mario created the Google Webfonts Helper (GWFH).
In Mario’s own words, the GWFH provides a “hassle-free way to self-host Google Fonts”, since “the effort to host Google web fonts on your own server is immense”.
First of all you need to download all .eot, .woff, .woff2, .ttf and .svg files, then copy them onto your server and finally paste a CSS snippet.
Sounds easy? Well it could be, if Google would actually provide any direct links to download these files …
… The [GWFH] service uses Google’s font API to retrieve a list of all available web fonts, fetches links to the .eot, .woff, .woff2, .ttf and .svg files by parsing their hosted CSS files (and faking the User-Agent to get them). It downloads all font formats and generates a customized archive with all your selected styles, formats and charsets. In combination with the CSS snippet (whose folder prefix can be customized) you should be ready to self-host your font immediately.
Mario Ranftl, last updated Oct 2016
Simply select the font you need on GWFH by searching for its name in the top left.
GWFH will then generate detailed step-by-step instructions with some CSS code and a download link. The download link will provide you with a ZIP file archive containing all the formats you would need to self-host the font on your own server.
The CSS code generated by GWFH is not required if your website builder comes with built-in functionality for managing custom fonts. Simply download and extract the font formats from the ZIP file, then follow the instructions provided by your website builder to upload the font to your website.
Quick links.
Google Fonts.
- Direct link to Google Fonts, currently hosted on fonts.google.com.
Google Webfonts Helper (GWFH) by Mario Ranftl.
- Direct link to GWFH, currently hosted on gwfh.mranftl.com.
- Legacy link to GWFH, previously hosted on Heroku (prior to 27 Nov 2022).
- Github project.
- Author’s notes.