TL;DR
Google Fonts loaded via the Google API automatically transmit each visitor's IP address to Google's servers, without prior consent. The IP address is personal data under the GDPR, making this transfer a non-compliant data processing operation. In January 2022, the Munich Regional Court ruled that a website using externally loaded Google Fonts violated the GDPR. The fix is to self-host fonts in Webflow by uploading them as custom fonts, which eliminates all requests to Google's servers.
Why do Google Fonts create a GDPR compliance issue?
The Google Fonts API works simply: when a browser loads a page that uses a font hosted by Google, it sends an HTTP request to Google's servers (fonts.googleapis.com). This request automatically includes the visitor's IP address.
You can look up Google Fonts in the FlowConsent service catalog alongside the other third-party services that may run on your site.
Google states that it collects these IP addresses and uses them for analytics purposes. The Court of Justice of the European Union confirmed in the Breyer ruling (Case C-582/14) that IP addresses constitute personal data. The GDPR therefore requires a legal basis for this processing.
Legitimate interest cannot be invoked here, because self-hosting fonts is a simple technical alternative that avoids any data transfer. The Munich court confirmed this in January 2022: the website operator could have hosted the fonts locally and avoided additional data processing.
What the case law says
In January 2022, the Landgericht Munich ruled that a website using Google Fonts via the Google API violated the GDPR. The court found that transmitting the visitor's IP address to Google without prior consent constituted a violation of the right to informational self-determination. The site was ordered to pay 100 euros in damages, but the legal precedent is significant.
Since this ruling, thousands of cease-and-desist letters (Abmahnungen) have been sent in Germany to website owners using externally loaded Google Fonts. Other data protection authorities in Europe, notably in Austria, have taken similar positions.
In France, the CNIL has not published a specific decision on Google Fonts to date. However, its doctrine on data transfers to third-party servers without consent is consistent with the Munich court's position. A website that transmits IP addresses to Google without a legal basis faces the same risk.
Does a cookie banner cover Google Fonts?
No, a cookie banner does not resolve the Google Fonts issue when fonts are loaded via the Google API. Google Fonts do not set cookies, but they trigger a transfer of personal data (the IP address) as soon as the page loads.
This transfer occurs before any user interaction with the consent banner. Technically, requests to fonts.googleapis.com fire at page render time, simultaneously with the banner display. The user has not yet had time to give or refuse consent.
Even if you blocked Google Font loading before consent (which is technically complex in Webflow), this would create a display issue: the page would first render with fallback fonts, then shift after consent. Self-hosting remains the only clean solution. For more on compliant banners, see our GDPR cookie banner guide.
How to detect if your Webflow site loads Google Fonts externally
The most reliable method is to inspect network requests in the browser. Here is the process using Chrome.
Step 1: open developer tools
Navigate to your published site, right-click, then select "Inspect". Go to the "Network" tab.
Step 2: filter requests
Reload the page, then filter by "fonts.googleapis.com" or "fonts.gstatic.com". If requests appear, your site loads fonts from Google's servers.
Step 3: check the source code
You can also view the page source (Ctrl+U) and search for "webfont.js" or "fonts.googleapis.com". The presence of these references confirms external loading. Webflow states in its own documentation that the Google Fonts integration uses the Google Fonts API and may not be GDPR-compliant. You can also use the FlowConsent scanner for a complete audit of your site.
How to self-host Google Fonts in Webflow
Self-hosting eliminates all requests to Google's servers. Font files are stored on Webflow's servers, and no data is transmitted to a third party.
Step 1: download the fonts
Go to Google Fonts (fonts.google.com), select your font, and download the files. Prefer WOFF2 format for optimal loading. You can also use Google Webfonts Helper, which generates the files and corresponding CSS directly.
Step 2: upload fonts in Webflow
In Webflow, go to Site Settings, then the Fonts tab. Under "Custom Fonts", click "Upload". Upload your WOFF or WOFF2 files, and name each variant clearly (for example "Inter Local", "Inter Local Bold").
Step 3: replace fonts in the Designer
Open the Webflow Designer, identify every CSS class that uses the Google Font, and replace it with the uploaded custom version. Check all breakpoints: some fonts may only be used at mobile or tablet sizes.
Step 4: remove the Google Fonts connection
Go back to Site Settings, Fonts tab, "Google Fonts" section. Delete each Google Font you added. Publish the site, then verify again with developer tools that no requests go to Google's servers.
Common pitfall: Webflow's default fonts
Webflow includes some Google Fonts by default in its Designer (Lato, Varela, Open Sans, etc.). If your site uses one of these fonts, it may continue loading from Google even after deletion from settings. The fix: upload the same font as a custom font and replace all instances in the Designer. For a complete guide on cookie and consent management on Webflow, see our dedicated article.
Common mistakes (and how to avoid them)
Thinking the issue is only about cookies. Google Fonts do not set cookies, but they transmit the IP address. The issue falls under personal data transfer rules, not the ePrivacy Directive on trackers.
If your Webflow site does not use analytics at all, read our article on whether a cookie banner is required without Analytics.
Removing the font from settings without replacing CSS classes. If you delete a Google Font without replacing the classes that use it, Webflow will apply a fallback font. Identify and replace all instances before deleting.
Forgetting fonts loaded via custom code embeds. Some templates or third-party components inject Google Fonts via link tags in custom code. Check Head Code and Body Code in site and page settings.
Ignoring fonts from embedded third-party services. A chat widget, a third-party form, or an embed can themselves load Google Fonts. The audit should not be limited to your own Webflow settings.
To block third-party scripts on Webflow until visitors consent, follow the FlowConsent Webflow integration guide.
Not testing after publishing. Always test on the published site, not in the Designer. The Webflow Designer and the published site can behave differently when loading external resources.
Checklist: fix Google Fonts on Webflow
- Open browser developer tools on your published site and check for requests to fonts.googleapis.com or fonts.gstatic.com.
- Identify all Google Fonts used in the Webflow Designer (inspect source code, search for webfont.js).
- Download the corresponding font files in WOFF2 format from Google Fonts or Google Webfonts Helper.
- Upload the fonts as custom fonts in Site Settings, Fonts tab.
- Replace every instance of the Google Font with the custom version in the Designer, across all breakpoints.
- Check custom code (Head Code, Body Code, page-level) to remove any link to fonts.googleapis.com.
- Delete Google Fonts in Site Settings, Google Fonts section.
- Publish the site and test again with developer tools.
- Verify that embedded third-party services (chat, forms, widgets) do not load Google Fonts themselves.
- Document the fix in your GDPR compliance records.
Conclusion
Using Google Fonts via the Google API on a Webflow site is a GDPR compliance gap that most agencies overlook. The fix is simple, fast, and often improves site performance. If you want to identify all trackers and data transfers on your site, including external fonts, run a free scan with FlowConsent.