Use Local Google Fonts (Web Fonts) for WordPress

The new General Data Protection Regulation (GDPR) took effect starting on 05/25/2018. This will result in a lot of changes for you as a website operator. This also applies to the Google web fonts that you use in your WordPress installation.

This article does not constitute legal advice on the subject of data protection, nor does it claim to be complete. Rather, we want to show you how to integrate web fonts quickly and easily into your website without retrieving the Google fonts from the Google servers.

Of course, there are several ways to reach your goal. We would like to introduce one of them to you.

Many free and commercial WordPress themes use the Google Fonts as a feature for the typographic design of your WordPress website. For you as a user, the easy integration and quality of these fonts is a convenient thing. The problem with these fonts in connection with GDPR is the external availability via Google servers.


Google Fonts and Privacy Policy

Every time you visit your WordPress website, Google Fonts that are not integrated locally are loaded directly from the Google servers. The following data is transmitted to Google, among others:

  • Name and version of the browser
  • Website (referrer) from which the Google Fonts were requested
  • Operating system and screen resolution
  • IP address of the user
  • Language settings of the browser

This personal data is transmitted to Google and processed at the latest when the IP address of the accessing user is transmitted. After May 25, 2018, you must notify your website visitors in your privacy statement that – and why – you submit personal data to Google in order to present the website with sent fonts.

But you can prevent the transmission of data to Google with a simple trick by retrieving the used web fonts directly from your domain. This allows you to bypass the Google servers and may improve the loading times of your website.


Use local Google Fonts for WordPress: The preparations

With five simple steps you prepare your website for the use of local web fonts.

  1. Select the desired font using google-webfonts-helper.
  2. Select the desired font styles by clicking on the boxes (multiple selection possible).
  3. Customize the path (e.g. /wp-content/fonts/).
  4. Copy the CSS snippet and save it in a text file named franklin.css on your hard drive.
  5. Download the required files and unzip the ZIP archive into a folder named fonts on your local PC.

Extend WordPress with Additional CSS Code for Google Fonts

  1. Load the folder “fonts” into the folder specified in the google-webfonts-helper to your web space. In this example, this is the path /wp-content/fonts.
  2. Check in your WordPress theme where you can specify your own CSS settings.
    For this example, the following Additional CSS must be added directly in the Customizer.

    /* libre-franklin-900 - latin */
    @font-face {
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 900;
    src: url('/wp-content/fonts/libre-franklin-v2-latin-900.eot'); /* IE9 Compat Modes */
    src: local('Libre Franklin Black'), local('LibreFranklin-Black'),
    url('/wp-content/fonts/libre-franklin-v2-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/wp-content/fonts/libre-franklin-v2-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
    url('/wp-content/fonts/libre-franklin-v2-latin-900.woff') format('woff'), /* Modern Browsers */
    url('/wp-content/fonts/libre-franklin-v2-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/wp-content/fonts/libre-franklin-v2-latin-900.svg#LibreFranklin') format('svg'); /* Legacy iOS */
    }
    /* libre-franklin-900italic - latin */
    @font-face {
    font-family: 'Libre Franklin';
    font-style: italic;
    font-weight: 900;
    src: url('/wp-content/fonts/libre-franklin-v2-latin-900italic.eot'); /* IE9 Compat Modes */
    src: local('Libre Franklin Black Italic'), local('LibreFranklin-BlackItalic'),
    url('/wp-content/fonts/libre-franklin-v2-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/wp-content/fonts/libre-franklin-v2-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('/wp-content/fonts/libre-franklin-v2-latin-900italic.woff') format('woff'), /* Modern Browsers */
    url('/wp-content/fonts/libre-franklin-v2-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/wp-content/fonts/libre-franklin-v2-latin-900italic.svg#LibreFranklin') format('svg'); /* Legacy iOS */
    }
  3. Add the CSS snippet from your previously saved file franklin.css in the WordPress backend using franklin.css in the WordPress backend using Appearance > Customize > Additional CSS.

    The functionality Additional CSS is already included in the WordPress core. Therefore, every modern WordPress theme should support this function. If your WordPress theme does not allow additional CSS, then you can retrofit this function, for example, using the following plugin: WP Add Custom CSS This alternative option also works with all our Managed WordPress installations.

For example, to check your changes, you can use the Google Chrome browser DevTools. There you will see that the font Libre Franklin is no longer loaded by Google, but by your domain.

Please rate this post :

7 thoughts on “Use Local Google Fonts (Web Fonts) for WordPress

  1. Hendry says:

    Thank you for sharing this post. It really helps me a lot. Especially i love the way you shown through gif image, it really guide to a perfect path.

  2. Sumit says:

    Don’t you think using google fonts create issue with site loading speed.

    1. 1and1help says:

      Hi Sumit,

      everything else than plain text creates issues with site loading speed. 😉

      Potentially the use of local Fonts should increase performance in comparison with externally loaded Google Fonts.

      Best regards,
      Michael, 1&1

  3. Akshat says:

    I have heard that using more google fonts in wordpress affects site speed drastically. Is this true?

    1. 1and1help says:

      Hi,

      Like with every item loading from an external source, this can happen.

      Google of course says that it doesn’t make your page slower. That’s something you might have to try for yourself on your personal website.

      Best regards,
      Michael, 1&1

  4. Seo India says:

    Thank you for sharing this post. Don’t you think using google fonts create issue with site loading speed.

  5. Thank you for sharing this post.

Leave a Reply

Your email address will not be published. Required fields are marked *