Google Fonts and the GDPR: what this is about
Google Fonts is a collection of more than 900 font families that Google provides free of charge. There are two ways to use them on a website: through the Google Fonts API – your visitor's browser then loads the font files directly from Google – or locally, from your own web server.
The difference sounds technical, but it is the heart of the matter: with the API, the visitor's browser opens a connection to a Google server. In doing so it transmits their IP address, without their consent and without them noticing. This is what the data protection discussion around Google Fonts revolves around – online shops in Germany have received numerous warning letters over it in recent years.
If you load the very same font from your own server instead, that connection disappears entirely. To your visitors the shop looks identical.
Disclaimer: The information in this article is of a general nature and cannot replace specific legal advice. Before using font APIs such as Google Fonts, be sure to seek legal advice regarding the General Data Protection Regulation (GDPR)!
How to tell whether your shop loads Google Fonts
You can answer this in two minutes using your browser's developer console. Open it (Windows: Ctrl + Shift + J, Mac: Cmd + Option + J), reload your shop and filter the network requests for fonts. If the hosts fonts.googleapis.com or fonts.gstatic.com appear, your shop is fetching fonts from Google.
Important: Always check your shop carefully for Google Fonts. They can also come in independently of the theme you use – for example through other plugins, embedded map services, review widgets or individual customisations. A clean theme alone is no guarantee of a clean shop.
Three ways to serve fonts in Shopware 6
1) Use the fonts that ship with your theme
The simplest way: you use a font your theme already brings along. It then sits on your own web server and is loaded from there – no API, no connection to third parties, nothing for you to set up.
ThemeWare® ships 15 fonts, all of which are delivered this way. You will find them in the ThemeWare® manual:
ThemeWare® Manual => Fonts
2) Embed your own fonts locally
You would like to use a font that is not included – a Google font that is not part of the package, or a purchased corporate typeface? Then you download the font files once and store them on your web server.
The result is the same as with option 1: the font comes from your server, not from Google.
Tip: Check the Shopware Community Store first to see whether a suitable extension already exists that does the work for you.
3) Deliberately enable the Google Fonts API
ThemeWare® can also import fonts through the Google Fonts API. This configuration is disabled by default and has to be switched on by you deliberately:
Tab "Layout" => Block "Typography" => Section "Google Fonts" => Field "Import Google Fonts"
How the import works is explained here:
Important: We recommend embedding fonts locally rather than importing them through the Google Fonts API. Before using font APIs such as Google Fonts, be sure to seek legal advice regarding the General Data Protection Regulation (GDPR)!
ThemeWare® serves every font locally
The options shown above work in any Shopware theme. With ThemeWare® you do not have to deal with the topic at all: every font that ships with the theme sits on your own web server, and the Google Fonts API is switched off out of the box. You can set up your shop without touching a single line of code – and without a connection to Google being made.
Your benefits with ThemeWare®
- No programming: The fonts are part of every theme and are loaded from your server automatically – no download, no upload, no additional plugin.
- 15 fonts to choose from: Sans-serif, serif and display typefaces – configurable separately for text and headlines.
- Safe settings out of the box: The "Import Google Fonts" configuration is set to "no" by default.
- Recognises your input automatically: Enter the name of one of the included fonts and ThemeWare® serves it locally.
- Extensible: You can add your own fonts at any time – ThemeWare® does not stand in your way.
Three steps to a shop without Google Fonts
1) Choose a font
Pick one of the included fonts for text and for headlines:
Tab "Layout" => Block "Typography" => Section "Text" => Field "Fonttype"
Tab "Layout" => Block "Typography" => Section "Headlines" => Field "Fonttype"
Enter the font together with a fallback font, for example 'Open Sans', sans-serif.
2) Leave the API import switched off
Make sure the import through the Google Fonts API is disabled:
Tab "Layout" => Block "Typography" => Section "Google Fonts" => Field "Import Google Fonts" => "no"
3) Check the result
Open your shop and use the developer console to see whether any fonts are still being loaded from fonts.googleapis.com or fonts.gstatic.com. If the list stays empty, every font is coming from your own server.
Note: If you still find entries there, they come from a source other than your theme – check your remaining plugins and individual customisations.
Further information
- Basic knowledge: How font configuration works in ThemeWare® is explained in Font configuration
- Introduction: Configuring fonts
- Tutorial: Embedding fonts locally
- Tutorial: Importing Google Fonts
Which fonts ThemeWare® includes and how to use them is documented in the manual:
ThemeWare® Manual => Fonts