Embed Google Fonts easily in WordPress (2022)

To keep your Word­Press web­site com­pli­ant with the GDPR, you should embed your Goog­le Fonts local­ly. The who­le thing is not dif­fi­cult at all and can be imple­men­ted smooth­ly with a few CSS spe­ci­fi­ca­ti­ons and the Word­Press plug­in Asset Cle­a­nUp.

At the latest with the ruling of the LG Munich from 20.01.2022 you should beco­me acti­ve here and embed the fonts local­ly.

Step 1: Which Google Fonts are loaded on your WordPress site? #

First, you need to check which fonts are used on your web­site. For this you can use the deve­lo­per tools of Goog­le Chro­me (Safa­ri, Ope­ra and Fire­fox also have deve­lo­per tools).

Now first open your web page on which you want to check whe­ther Goog­le Fonts have been included.

Then switch to the deve­lo­per tools (F12 on the key­board, alter­na­tively you can click on the 3 dots in the upper right cor­ner of your brow­ser and open the con­so­le in the menu > More Tools > Deve­lo­per Tools).

You should now be able to see a new win­dow with the deve­lo­per tools (Dev­Tools).

In the new win­dow, sel­ect the Net­work > Fonts tab to dis­play all the fonts loa­ded from the web page. Then rel­oad the page (F5).

Now you get an image of all fonts that have been loa­ded. You can use the fil­ter to nar­row it down by sear­ching the results for the key­word “gsta­tic” (Goog­le fonts are usual­ly included via fonts.gstatic.com).

On our exam­p­le page, only the font “kar­la” from fonts.gstatic.com is included. It’s best to make a note of all the fonts you see. The next step is all about fin­ding and down­loa­ding the fonts.

Step 2: Download Google Fonts #

Now that you have found out which fonts are used in the first step, you must of cour­se down­load them first.

Fonts are offe­red in various for­mats TTF, WOFF, WOFF2, EOT and SVG. This is becau­se not all devices sup­port all for­mats. The­r­e­fo­re, to ensu­re the best com­pa­ti­bi­li­ty for your Word­Press web­site, you should always make sure to include all for­mats if pos­si­ble.

Goog­le its­elf only offers the TTF for­mat for down­load. The­r­e­fo­re, the Goog­le Web Fonts Hel­per web­site pro­vi­des a reme­dy.

The­re you can find all Goog­le Fonts for down­load in dif­fe­rent for­mats. By sear­ching in the upper left area you have the pos­si­bi­li­ty to fil­ter the list. Now enter the name of the fonts you found in step 1.

Then sel­ect the appro­pria­te font with one click.

You will now see the detail view on the Goog­le Web­fonts Hel­per page with more opti­ons. Here you can choo­se the char­set and the desi­red styl­es. The page also gene­ra­tes the CSS styl­es and allows you to down­load the fonts.

To con­ti­nue, sel­ect the styl­es you want now and then down­load the files by cli­cking the but­ton at the bot­tom of the page.

We will need the CSS in step 3 later, once we add the data to your web­site. It is hel­pful to lea­ve the page open so that you can easi­ly cus­to­mi­ze the fol­der later (field: Cus­to­mi­ze fol­der pre­fix) and the CSS will be rege­ne­ra­ted auto­ma­ti­cal­ly.

Step 3: Deploy the Google Fonts to your web server #

Next, you need to upload the down­loa­ded fonts to your web ser­ver. For this you ide­al­ly use a FTP pro­gram (e.g. File­Zil­la, WS FTP or simi­lar).

So con­nect to your ser­ver and chan­ge to the the­me direc­to­ry of your Word­Press web­site. Here you crea­te a new fol­der, which you call “fonts”.

Then you switch to the fol­der and crea­te a sepa­ra­te fol­der for each of your fonts. Then you copy the fonts that you have pre­vious­ly down­loa­ded into it.

Now copy the path to the font. In our exam­p­le, it is as fol­lows:

/wp-content/themes/storebiz/fonts/karla/

You can now add this to the Goog­le Web fonts Hel­per in the “Cus­to­mi­ze fol­der pre­fix” field to gene­ra­te the CSS. (Note: Be sure to include the “/” at the end of the path).

Step 4: Include CSS to use the Google Fonts locally #

In order to load the Goog­le fonts that we uploa­ded via FTP befo­re, you have to tell your Word­Press web­site via CSS whe­re to find them. You can do this for exam­p­le via the style.css of your the­me. Alter­na­tively, you can also add it in the Word­Press Cus­to­mi­zer.

To do this, open the style.css file loca­ted in the root direc­to­ry of your the­me (child the­me). Copy the CSS code to the end of the file. Save the file and upload it again to your ser­ver.

That’s it — now we just need to disable the calls to Goog­le Fonts on the CDN.

Step 5: Disable loading of Google Fonts via CDN #

Goog­le Fonts can be inte­gra­ted into your page in various ways. The best expe­ri­ence we have had so far to disable the fonts is with the Word­Press plug­in Asset Cle­a­nUp. The plug­in has so far detec­ted and remo­ved all links on our test pages.

The free ver­si­on of the Asset Cle­a­nUp plug­in can be down­loa­ded and instal­led direct­ly from the Word­Press Plug­in Mana­ger.

After acti­va­ti­on, go to Asset Cle­a­nUp > Set­tings > Goog­le Fonts > Remo­ve All and move the slider to the right. This will search the HTML code for com­mon for­mats of the Goog­le Fonts link. Hits will be remo­ved auto­ma­ti­cal­ly.

Then save the set­tings and clear the cache of your Word­Press web­site (if available).

Summary #

That was it. As you can see, remo­ving Goog­le links is pos­si­ble in a few steps wit­hout any pro­gramming know­ledge. Nevert­hel­ess, you should check your page after­wards for pos­si­ble occur­ren­ces of Goog­le fonts. The Word­Press plug­in Asset Cle­a­nUp finds many of the links, but it can also hap­pen here and the­re that indi­vi­du­al links fall through the grid. Then usual­ly only the indi­vi­du­al cor­rec­tion helps.

Feel free to cont­act us if you need help remo­ving the links. Then we will do it for you at a fixed pri­ce. Just arran­ge a first mee­ting.

Useful links #

• https://de.wordpress.org/plugins/wp-asset-clean-up/
• https://google-webfonts-helper.herokuapp.com/fonts
• https://fonts.google.com/