Google Fonts: Another wave of warnings

Google Fonts are in most cases embedded directly into the HTML document with a <link>tag or via @import statement in a CSS file. In the following example, we want to include the "Roboto" font in a website:

Example with a <link>tag:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Example with @import:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

In both cases, you call the address of the Google Font in the browser. (In the example it is the URL: https://fonts.googleapis.com/css2?family=Roboto&display=swap)

After that you will see the CSS code that integrates the font into the website: (For this example we have reduced the CSS code from seven to one rule)

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

In the example, the URL "https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2" is used. The file with the cryptic name "KFOmCnqEu92Fr1Mu72xKOzY.woff2" is the font. Since we want to put the font on our server, we open the URL in the browser and thus automatically load the font on our computer. Now we upload this file to our server or hosting package. (The file name can be renamed)

In the next step we copy the CSS instructions into our local CSS file of the website and change the src in the @font-face rule. Here we set the URL to the path where we uploaded the font, for example:

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/css/fonts/roboto/roboto-regular.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

As a last step, we remove the code snippets with which we had previously included the font via Google. Now we have included the Google Font "locally".

In WordPress there are a variety of plugins and also many possibilities how Google Fonts were integrated. A simple solution for all the cases does not exist. If you are not sure how Google Fonts have been integrated into your WordPress, please contact us.

1. If you use a builder or theme such as "ProPhoto" or "Enfold", you can disable or delete Google Fonts in the settings and upload your own fonts in the system.
2. If you are using a default WordPress theme like TwentySeventeen, you can disable Google Fonts with the following code
   
   

   add_action('wp_print_styles', 'twentyseventeen_dequeue_styles', 100);
   
   function twentyseventeen_dequeue_styles() {
   wp_dequeue_style( 'twentyseventeen-fonts' );
   }

3. Using plugins like "Disable Google Fonts" or "Borlabs Font Blocker" you can easily disable Google Fonts. The problem is that this method only works with standard themes such as TwentySeventeen or similarly functioning themes.

For steps 2. and 3. please don't forget to upload the font locally and include it in your own CSS file. In both steps, fonts are only deactivated or no longer included.