How to host Google Fonts locally in WordPress

Open the site in a private browser window and inspect the page source or Network panel for requests to fonts.googleapis.com or fonts.gstatic.com. Record each family, weight and style. Check the theme, page builder, forms, pop-ups and shop templates, because removing only the visible heading font can leave other Google requests active.

Use only the weights and character sets the site actually needs. Extra weights increase downloads and can make the manual setup harder to maintain.

If you use Elementor, go to Elementor → Editor → Settings → Performance, find Load Google Fonts Locally, enable it, and save. Elementor downloads the fonts it detects, stores them under its uploads area, and rewrites its generated CSS to use the local files. The setting may need enabling again after an Elementor update.

Regenerate or clear Elementor files and data, then purge your WordPress, server, CDN and browser caches. Do not also run another font-downloading system unless you have checked for duplicates.

For a manual setup, open the Google Fonts stylesheet for the exact families and weights you recorded. Download the font files referenced by its @font-face rules, preferably the WOFF2 files, and keep the matching weight, style and unicode range information. Google’s CSS API generates font-face declarations for the requested families and styles.

Upload the files to a stable location in your child theme or uploads directory. Do not place them in a parent theme that will be overwritten during an update.

Add one @font-face rule for each required weight and style in the child theme stylesheet or a separately enqueued CSS file. Each rule needs the same family name used by your design, the correct font-weight and font-style, and a src URL pointing to the uploaded WOFF2 file.

Set font-display: swap unless you have a specific reason not to. WordPress recommends enqueueing the stylesheet through the normal stylesheet system rather than inserting a direct link in the header.

Disable the theme, plugin or builder option that still loads Google Fonts from Google. If the original stylesheet remains, the site can continue making third-party requests and may load the same family twice. Replace any CSS @import that points to Google with your local stylesheet or local font-face rules.

On a block theme, check the editor’s global typography settings and theme.json; on a classic theme, check the customiser, theme options and enqueued styles. The exact removal method depends on which component added the request.

Purge the page-cache plugin, server cache, CDN cache and builder-generated CSS. Visit the front end in a private window and confirm that the font files load from your own domain over HTTPS. The Network panel should show no requests to Google’s font domains.

If text falls back to a system font, check the file URL, MIME type, weight and style. After a migration, old HTTP or staging URLs can cause mixed-content or CORS errors; update the site URLs, regenerate generated CSS and clear every cache layer.

The manual route is fine for a small site with one theme and a few known font files. For a site using several builders, WooCommerce templates or regularly changing typography, a dedicated plugin reduces the work of detecting fonts, downloading them and updating generated CSS.

OMGF Pro is a suitable option when you want automatic Google Font detection and local hosting with privacy-focused performance settings. After activation, review the detected fonts, remove duplicates, clear caches and verify that no external font requests remain.