Google Fonts: use it while preserving visitor's anonimity
Google Fonts is a free font library. It is a large collection of fonts that can be used within websites and other applications.
A font can be installed either remotely, by connecting to an external server, or locally, by adding the files on your server.
What happened in Europe?
In Germany, the Munich court sentenced a website to pay a € 100 fine for violating the privacy of its users. We can also read the sentence in the original language.
In short, the website loaded the fonts using Google's service remotely: users, without knowing it, had their IP address sent to Google's American servers, configuring a data transfer outside Europe.
The most suitable solution to avoid this type of problem is to use the fonts locally, without connecting to an external server.
How does the violation of the GDPR happen with the use of Google Fonts remotely?
This is the code that loads the Open Sans font through the Google service:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap"
rel="stylesheet"> When the user connects to a website configured in this way, he sends a request from his browser to the fonts.googleapis.com and fonts.gstatic.com servers, to obtain the fonts necessary to display the page.
For this reason, the Google servers receive the user's IP address without one's consent.
How to use Google fonts in compliance with the GDPR?
A solution like the following allows you to do the same operation but without sending the data to Google:
<link as="style" href="/css/lexend.css" rel="preload"/>
<link href="/css/lexend.css" rel="stylesheet" />In this case, the character set is loaded using files locally uploaded to the server. The css file contains the information that the browser will use to load the fonts into the web page:
@font-face {
font-family: 'OpenSans';
src: url('OpenSans.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OpenSansBold';
src: url('OpenSansBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}By removing the connection to the Google server, we prevent the user's IP address from being sent out of our control.
How to download a font?
Let's download OpenSans from Google Fonts, extract the ZIP archive and upload the .ttf files in a folder on our server. There might be also other files like .otf, .woff, .woff2, .eot or similar.
Alternatively we can use other services like: Fontsquirrel, Dafont, 1001FreeFonts, or similar ones.
It is especially important to pay attention to the license. Hardly anyone will complain about how we use the font, but it is a good idea to verify that the use respects the provisions of the creators of the character set. Sometimes it is possible to download font families for free which in reality are suited for free use within personal projects, and not for commercial purposes, as in the case of paid apps or physical products on the market.
Follow us Facebook to receive all our updates!