hexerei software creations

Fonts

Contents

Note: This article merely describes procedures for embedding Google Fonts in a GDPR-compliant manner, but does not provide information or recommendations regarding the legal situation.

Background

On January 20, 2022, the Munich Regional Court decided that the use of Google Fonts on websites without user consent violates their personality rights. This refers to the common method of embedding Google Fonts, where Google Fonts are embedded via a stylesheet link in the header of the HTML file.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600&display=swap&subset=latin-ext" rel="stylesheet">

Example of a typical Google Fonts embedding

This procedure is both simple and practical. But it has a significant catch regarding the General Data Protection Regulation (GDPR): By loading the fonts in the header, the visitor's IP address is transmitted to Google without the visitor having the opportunity to consent to the transmission of their IP address.

Why are Google Fonts not GDPR compliant?

The dynamic loading of Google Fonts typically occurs in two steps. In the first step, the CSS definitions of the fonts used are loaded in the header from Google's fonts.googleapis.com server. The CSS definitions of the fonts contain the sources from which the fonts should be loaded. In the second step, the actual font files are then loaded via Google's fonts.gstatic.com server. In both cases, the user's IP address is transmitted to Google servers in the USA.

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkWVAexoMUdjFXmQ.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Example of a CSS font definition as loaded from Google servers, which also contains the source of the font file

According to Google's statement, the IP address is only used to determine the region to which the fonts are delivered, and not misused for advertising or marketing purposes. However, since the IP address is transmitted from the European Union to the USA, Google's statement is worthless regarding GDPR.

Does this only affect servers in the EU?

No. In fact, GDPR was defined to protect the rights of European Union citizens, even when they visit websites operated by foreign providers. Therefore, the personality rights violation takes effect even if a server outside the EU dynamically embeds Google Fonts.

How can I determine if a website dynamically loads Google Fonts and transmits my IP address?

To ensure that you don't disclose your IP address to Google yourself, you can relatively easily determine whether a website dynamically loads Google Fonts.

Check the header links in the page source

Depending on the browser, you can access the page source via the main menu or by right-clicking within the browser window. Here you can look in the page header (the area in the page source that is delimited by the <head>...</head> tags) to see if there is a <link> tag that refers to the fonts.googleapis.com server.
```
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600&display=swap&subset=latin-ext" rel="stylesheet">
```
Example of a typical Google Fonts embedding
Check the loaded resources in the network log

In many browsers, you can also access Element Information or Inspect via the right mouse button or main menu in addition to displaying the page source (Ctrl-Shift-i or Alt-Cmd-i on Mac). A view of the page contents should appear in the lower area of the browser window with an upper tab where you can select Console or Network/Network Analysis in addition to Elements/Inspector.

If you click on Network, all loaded resources are listed by name, with the corresponding server (Host/Domain) from which the resource was loaded specified. If fonts.googleapis.com or fonts.gstatic.com is listed here, then the site is not GDPR compliant.

How can I as a website operator ensure that my site's fonts are GDPR compliant?

To avoid a warning for a GDPR violation, you only need to ensure that the visitor's IP address is not transmitted to Google's servers.

The simplest option would of course be to replace the Google Fonts with standard system fonts (Helvetica, Arial, sans-serif, etc.), but this naturally loses design distinctiveness. Therefore, the most sensible method is to host the already used Google Fonts locally from your own server, thereby avoiding a detour via Google's servers.

Note: By hosting fonts yourself, downloading the fonts will certainly be somewhat slower for the end user than with Google's high-performance CDN servers, but thanks to intelligent browser cache functionality, this should not make a significant difference in the overall loading time of the website.

Local hosting for static websites

To prepare the fonts for local hosting, it is necessary to have a connection to your own server via SSH or (S)FTP to download the current state of the currently hosted pages for modification, and to upload the fonts and CSS adjustments.

Step-by-step procedure

Fortunately, there are already some helpful tools for downloading the font CSS definitions and font files in all common formats, with the Google Webfonts Helper, which is freely available, being particularly noteworthy. Here you only need to search for the desired fonts, select them, and can directly download the correct font CSS definitions and all required font files as a ZIP file. With this tool, you can skip the first four steps directly and continue with Step 5.

Alternatively, you can of course also work through the first four steps described here to achieve the same result with a bit more effort.

Download font CSS definitions: Copy the URL from the original Google Fonts stylesheet link and open it directly in the browser (e.g. https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600&display=swap) to save the CSS definitions generated by Google locally. Best in the same directory where already used CSS files are located and name the file fonts.css.
Download TTF font file: Go to Google Fonts, search for the desired fonts and then download them via the download button (top right). It's always best to briefly check the font license again to ensure that only freely usable fonts are loaded.
Convert TTF font file to required formats: The TTF (True Type Font) files are only supported by some browsers. For modern browsers you need at least font files in WOFF (Web Open Font Format) or WOFF2 format (the newer variant). Internet Explorer browsers also support the EOT format - Safari, Android, and iOS support TTF and older iOS versions support SVG.

If you search for TTF font conversion, you'll find several free tools. Some only support individual font conversion, so I'd like to highlight one tool: Online Font Converter. This tool allows converting multiple TTF files to all required formats. As with all good open source tools, I always recommend making use of the option to donate to the developer so that the tool continues to be maintained.

Adjust font CSS definitions: Now open the previously downloaded fonts.css in an editor and adjust the respective src: attribute to point to the converted locally stored font files. It's important that the specified url paths only point to the locally stored font files. All available formats can be listed - the browser automatically selects the appropriate format.

/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compatibility Mode */
src: local(''),
    url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6 to IE8 */
    url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Top modern browsers */
    url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern browsers */
    url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Older iOS */
}

Example of the Open Sans font when stored in the fonts directory relative to the fonts.css file

Embed font CSS in your own HTML pages: Now the new fonts.css must be inserted instead of the previous Google API integration. To do this, replace the link to fonts.googleapis.com with the following link:
```
<link href="./css/fonts.css" rel="stylesheet">
```
Example of a relative path if the CSS files are in a corresponding subdirectory
Upload font CSS, font files and updated HTML files: Now the fonts.css file must be copied to the live web server via FTP together with the fonts and the adjusted HTML files. Make sure that the folder structure and relative paths match so that the files can be found by the web server.
Test and done: If all files were transferred correctly and the paths are correct, the page should look the same as before, even if there may be a slight delay in loading the fonts. Whether the new locally hosted fonts are loaded correctly can be checked again via the element information - Ctrl-Shift-i or Alt-Cmd-i on Mac - of the page and in the network view ensure that all resources were loaded successfully and no more access to Google servers occurs.

Local hosting for WordPress-based websites

For WordPress sites, the procedure described above can of course also be used to edit the WordPress theme, but it's even easier: For CMS systems like WordPress, there are already plugins that automatically support local hosting of Google Fonts and only need to be installed and configured. A good example of such a plugin is OMGF, which automatically detects used Google fonts and stores them locally in the WordPress cache so that future access only uses the local cache.

Conclusion

The procedure for replacing dynamically loaded Google fonts is not without effort, but fortunately this effort only needs to be made once, and then you're on the legally safe side and don't have to fear warnings, so the effort is worthwhile.

The success of Google Fonts with over 900 free font styles is shown by its over 66 trillion accesses. The new legal situation requires a rethink, but will probably not force a decline in success. Nevertheless, one should consider to what extent the use of reloaded font files makes sense, and when the use of system fonts is sufficient. Even though internet connections are getting faster and faster, unnecessary loading of additional resources ultimately also contributes to a negative CO₂ balance.

So anyone who wants to offer their visitors fast-loading websites and avoids unnecessary use of additional font files is also doing something for the environment, and with reduced computing requirements also minimizes the CO₂ footprint.