Host Google Fonts on your own site

• Privacy. When a page loads a font from Google, each visitor's browser sends their IP address to Google. In 2022 a court in Munich (LG München) found that doing this without the visitor's consent broke the GDPR. Fonts served from your own site keep that request on your server, which matters most for sites with visitors in the EU.
• Fewer outside connections. The browser no longer has to connect to Google's font servers before it can show your text, and your pages no longer depend on them being reachable.

Google Fonts are published under the SIL Open Font License or the Apache License 2.0, which allow you to host them on your own site.

In the WordPress admin, go to EtchwpKits → Fonts. The screen shows these parts as they become relevant:

1. Click Scan this site

   The scan loads your front page and a few of your most recently changed pages and posts, the way a logged out visitor sees them, plus the stylesheet files of your own site that those pages use. It takes a few seconds.

2. Read the status

   The status says either All fonts on this site are served locally. or how many font families are still loaded from Google's servers. Below it you see when the site was last scanned and which pages were checked.

3. Check what was found

   The Loaded from Google table lists each family with its Weights and styles (for example 400, 700, 400 italic) and where it was Found in: a stylesheet link on a page, an @import in a style or a stylesheet file, or an @font-face rule that points at Google.

The result is kept for an hour. Click Scan again at any time, for example after you changed a stylesheet in Etch. The screen also scans again by itself after you host or remove a family.

Click Host locally on a family in the Loaded from Google table. When the scan found more than one family, Host all locally does them all at once.

The plugin then:

• downloads the weights and styles your pages use, in the modern woff2 format, from Google,
• checks every file, and stores the family in your uploads folder, under wp-content/uploads/etchwpkits-fonts/ with one folder per family, next to a small fonts.css stylesheet,
• and starts serving that copy on your site right away.

A notice confirms it, for example Inter is now served from this site (4 files, 412 KB). The family moves to Served from this site, where its status reads Served locally and View stylesheet opens its local fonts.css.

If a page later asks for a weight the local copy does not have, the family shows up in the scan again with Update local copy. Click it to add the missing weights.

Once a family is served from your site, the plugin loads its local stylesheet on every page and stops the browser from asking Google for it:

• Google Fonts added the standard WordPress way, by a theme or another plugin, are switched to the local copy automatically. A Google link that also asks for families you did not host keeps only those.
• While any family is served locally, connection hints to Google's font servers (preconnect and dns-prefetch) are removed, because a hint alone already opens a connection to Google.
• The plugin also adds the local fonts to the Etch builder canvas, so the canvas can match the site.

The plugin is careful: a family only counts as served while its stylesheet and every font file are on disk. If a file goes missing, the status says Files are missing, so Google is used for this family. Host it again to repair it. and pages load that family from Google in the meantime. Click Host again to repair it. A missing file can cost privacy, but it never breaks a page.

To keep the Google Fonts that the theme and other plugins load off your pages altogether, also for families you do not host, see Privacy.

An @import inside an Etch stylesheet is the one place the plugin cannot switch on its own: that is the next step.

Etch's own guide suggests pasting a Google Fonts @import line at the top of a global stylesheet, so this is the most common source. After you host the families it asks for, the plugin offers to replace that line with one that loads your local copy.

1. Open the builder

   Open any page in Etch. When one of your Etch stylesheets loads Google Fonts that your site now serves itself, a card titled Serve fonts from this site appears in the bottom right corner. On the Fonts screen, Open Etch to replace it under Google Fonts @import rules opens the builder with the card showing.

2. Check the lines

   The card lists each stylesheet by name, with the Google line struck through and the local line that replaces it below.

3. Click Replace imports

   The plugin changes only that one line in each stylesheet and checks the result. Each row then says Replaced. When all are done, scan again on the Fonts screen to confirm.

Not now hides the card for that set of imports; it comes back when the imports change, or when you click Open Etch to replace it. If a line also asks for a family you have not hosted yet, the card says so, for example Host Inter on the Fonts screen first., and leaves that line alone.

Prefer to do it yourself? Under each import on the Fonts screen, Replace it by hand shows the exact line to paste: in the Etch builder, open the Style Manager and its Stylesheets tab, find the stylesheet with the Google line, replace it, save, then scan again.

Sometimes a theme or template prints its own Google Fonts link or @import straight into the page HTML, outside the standard WordPress way. Hosting the family is not enough then. Under Privacy, tick Also rewrite Google Fonts links written straight into the page HTML and click Save, then scan again.

It only touches families served from your site and leaves everything else as it is. It is off by default because most sites do not need it.

An @font-face rule that names a Google font file directly cannot be switched automatically. The scan lists where it is; edit that stylesheet to use the local copy, or ask the theme or plugin author to load the font from your site.

You do not have to wait for a page to use a font before you host it.

Add a Google font

Under Add a Google font, type the family name as fonts.google.com writes it (for example Inter or Open Sans), tick the weights (400 and 700 are ticked to start with), tick Also host the italic of each chosen weight if you need italics, and click Host locally. Not every family comes in every weight: if Google Fonts does not have one you chose, nothing is stored and the message says so.

Upload your own font files

Under Upload your own font files, enter a Family name (the name you use in CSS, for example Brand Sans), then choose a file and its Weight and Style on each row. Add another file adds rows, up to 12. Click Upload and host. woff2 is best; woff, ttf and otf also work, up to 2 MB per file and 20 MB per family. Each file is checked to be a real font before it is stored. Only upload fonts whose license allows use on a website.

A font variable lets an Etch style use a hosted font by name, for example font-family: var(--ewk-font-inter). The plugin keeps them in an Etch stylesheet called EtchwpKits fonts, which also loads the local fonts in the builder canvas, so the canvas shows them too. If an earlier version of the plugin made that stylesheet under a custom name, the plugin keeps finding and using it, as long as it carries the last custom name the site used or the one before it.

1. Open Etch to add font variables

   On the Fonts screen, under Font variables for Etch, click Open Etch to add font variables. The builder opens with the Serve fonts from this site card.

2. Click Add font variables

   The card shows the variables it will write, for example --ewk-font-inter: "Inter", sans-serif;, and confirms with Added the font variables to the "EtchwpKits fonts" stylesheet.

After you host or remove a font, the card offers Update font variables, and Remove font variables takes them out again. Only that stylesheet is touched.

To use a font for all headings or all body text, paste its variable into Etch's Typography settings (for example the Default Font Family under Headings) or into the heading and text font fields in Automatic.css's dashboard. Or let the Font Manager do it: tick Use for headings, Use for body text or Use for code in a family's settings, and it sets those elements and fills in --heading-font-family and --text-font-family for you (see Site fonts).

When you insert a library component that uses a Google font your site does not host yet, the panel asks, for example This component uses Inter. Host it on this site? Click Host Inter and the plugin hosts it in just the weights and styles the component uses, and loads it in the canvas. If an Etch stylesheet still imports that font from Google, the panel then offers Replace imports as well.

The panel asks once per font each time you open the builder, and the offer stays until you use it or dismiss it. Dismiss it to keep the font loading from Google.

In Served from this site, click Remove local copy and confirm. The family moves to the trash, where it can be restored from the Font Manager for 30 days.

• A Google family loads from Google again on every page that still uses it. Its local address keeps working too and points at Google Fonts, so an Etch stylesheet whose @import you replaced keeps its font. The family is then listed under Loading from Google again: Host locally again brings it back, and Delete forwarder drops the local address once nothing imports it.
• An uploaded family has no Google copy, so text set in it uses the next font in its font-family list.

Near the bottom of the Fonts screen, above When the plugin is deleted, are three groups of settings, each with its own Save button. All of them are off by default. They came with plugin version 0.20.0.

Stylesheet

Print the font CSS inline in the page writes the @font-face rules of the fonts served from your site, and the generated font stylesheet, into each page, on your site and in the Etch canvas, instead of loading them as separate files. That saves the browser one request per stylesheet, but the CSS can no longer be cached on its own: it is sent again with every page. It is worth it for one or two families with a few weights. With many families, weights or character sets, keep the separate files. A fonts.css that one of your Etch stylesheets imports itself, for example after Replace imports, is still loaded from its file, since Etch prints that stylesheet.

The generated font stylesheet holds the font variables, site fonts and Apply to rules from the Font Manager, and it is written again after every change there. The screen says when it was last generated, or that it is out of date, in which case pages print the current CSS inline until it is generated again. Click Regenerate stylesheet when the file was edited, deleted or restored from a backup by hand.

Privacy

Block Google Fonts loaded by the theme and other plugins stops stylesheets from fonts.googleapis.com that the theme or a plugin adds the standard WordPress way from loading, on your site and in the Etch canvas, and removes the preconnect and dns-prefetch hints to Google's font servers. Etch's own stylesheets are never blocked, and fonts served from your site keep working. Text set in a blocked font shows in the next font of its font-family list until you host that font here.

The Privacy group also holds Also rewrite Google Fonts links written straight into the page HTML (see Links in themes and templates).

Conversion

The Font Manager converts ttf and otf files to the smaller WOFF2 format (or WOFF, where a browser cannot make a WOFF2) in your browser and sends only the converted file, so an original reaches your site only when it was uploaded earlier or without converting. With Delete the original after converting it on, when an upload adds a WOFF2 or WOFF file for a weight and style of a family, the larger ttf, otf or WOFF file already stored for that same weight and style is deleted. Browsers already load the smaller file, so pages look the same. A file that another weight or style of the family still uses is kept, and other families are never touched. The upload message says how many files were deleted.

Changing these settings needs an active plan after the beta. What they already do on your site keeps working without one.

• Page caches. If your site uses a page cache, clear it after hosting fonts, so visitors get pages without the Google links. Then scan again.
• Deleting the plugin removes its settings but keeps the fonts in wp-content/uploads/etchwpkits-fonts/, so pages and Etch stylesheets that load them keep working. To delete the font files too, tick Delete font files when the plugin is deleted under When the plugin is deleted and click Save first. Then put back the original Google line in any Etch stylesheet you changed.
• Without an active plan, after the beta, hosted fonts keep being served and you can still remove a local copy. The other Fonts tools need an active plan.

Something not working? See Troubleshooting.