Blog

GDPR and privacy friendly Google Fonts with Elementor in 3 steps

Hosting Google Fonts locally with Elementor to comply with GDPR and protect user privacy — without compromising your design or your Lighthouse score.

ByUlrich Lehner Published TagsGDPR · Privacy · Google Fonts · Elementor · WordPress

The General Data Protection Regulation (GDPR) requires websites to obtain explicit consent before storing data about users. That affects almost every modern website, because most of them rely on cookies and external resources.

Google Fonts are a particular problem. They load from an external CDN, so the user's IP — which is personal data — is exposed to a third party, often without consent. Serving them from an external origin means you either need to gate the fonts behind a consent click (bad UX, layout shifts) or host them yourself.

Hosting fonts locally is the cleaner solution. It avoids the external request entirely, and with Elementor Pro it takes about ten minutes.

Step 1 — Convert a Google Font

Start at Google Fonts Helper to simplify the conversion. Search for your font, pick the weights and styles you actually use, and download the font package. The included CSS is not needed for what comes next.

Google Fonts Helper website — interface for downloading a locally-hostable version of a Google Font, with weight selectors and CSS preview
Google Fonts Helper — pick weights, download the font package.

Step 2 — Create a Custom Font in Elementor

Upload the downloaded fonts via Elementor's Custom Fonts section.

Navigate to Elementor → Custom Fonts → Add New and assign the font files for each weight and style you need. You may end up with several variations, but this is a one-time setup.

Elementor's own help docs have screenshots of this flow if you want visuals alongside these steps.

Elementor Pro Custom Fonts admin screen in WordPress — Jost font being uploaded with weight-specific WOFF2 files
Elementor Pro → Custom Fonts — upload each weight + style.

Step 3 — Replace External Fonts with Local Fonts

Replace the external fonts throughout your site's content with the new local versions. If you're using Global Fonts in Elementor, this is a single change — update them and every page inherits. Otherwise, review your pages individually and swap the typography settings.

Verify

Open your browser's developer tools, go to the Network tab, reload the page, and filter by Font. Every font file should now load from your own domain. If you still see requests to fonts.googleapis.com or fonts.gstatic.com, something — a stylesheet, a plugin, an inline block — is still pulling externally. Track those down and repoint them to the local copies.

Chrome DevTools Network tab filtered by Font — every font request now served from the site's own origin, confirming Google Fonts are no longer loaded externally
DevTools → Network → Font — every request hits your own origin.

With this in place the site is GDPR-friendlier, one fewer third-party origin shows up in your Lighthouse audit, and typography rendering is slightly faster because there's no cross-origin handshake.