Using Local Google Fonts (Web Fonts) for WordPress

1 Reply

Please Note:

The text on this page was translated by translation software. A revised version from our editors will be available soon.

On 25.05.2018 the new data protection basic regulation ( GDPR ) came into force. This changes a lot 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 data protection, nor does it claim to be complete. Rather, we would like to show you how to quickly and easily integrate web fonts into your website without downloading the Google Fonts from the Google servers.

As so often there are of course several ways to the goal. We would like to introduce one of them to you.

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

Google Fonts and Privacy Policy

Each time you call up your WordPress website, the Google fonts that are not locally integrated are loaded directly from the Google servers. Among other things, the following data will be transmitted to Google:

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

At the latest when the IP address of the accessing user is transmitted, personal data is transmitted to Google and processed. After 25.05.2018, you must inform your website visitors in your privacy statement that - and why - you are submitting personal data to Google in order to present the website with fancy fonts.

But you can use a simple trick to prevent the data from being transferred to Google by retrieving the web fonts you use directly from your domain. This way you bypass the Google servers and possibly improve the loading times of your website.

Use local Google Fonts for WordPress: Preparations

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

  • Select the desired font with the help of google-webfonts-helper
  • Select the desired font styles by clicking on the boxes (multiple selection possible)
  • Modify the path (e.g. /wp-content/fonts/)
  • Copy the CSS snippet and save it to a text file named franklin.css on your hard disk.
google-webfonts-helper overview
  • Download the required files and extract the ZIP archive into a folder named fonts on your local PC.
google-webfonts-helper local

Enhance WordPress with additional CSS code for Google Fonts

  • Upload the folder "fonts" to your webspace in the path given by google-webfonts-helper. In this example, this is the path /wp-content/fonts
  • In your WordPress theme, check where you can specify your own CSS settings. For this example, the custom CSS looks like this and can be added directly via 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 */
}
  • Add the CSS snippet from your previously saved file franklin.css in the WordPress backend via Design > Customizer > Additional CSS
WordPress Customizer

Since WordPress version 4.7 the functionality Additional CSS is already included in the WordPress core. Therefore every modern WordPress theme should support this function nowadays. If your WordPress theme does not allow additional CSS, then you can upgrade this function with the following plugin: WP Add Custom CSS

This retrofit also works with all our Managed WordPressinstallations.

For example, to review your changes, you can use the Google Chrome browser's developer tools. There you will see that the font Libre Franklin is no longer loaded by Google, but by your domain:

Google Fonts Local ./. Downloaded via Google

This article was published on 24 Sep 2018 by sebastian.zientek as part of the topic WordPress .

1 Reply

Leave your reply

Delhi Gurdwara Committee offers to build ultra modern ports at Kartarpur Sahib - Punjabi News
https://bit.ly/2zzjF2y

Leave your reply