No more Google Fonts to make theme faster and more DSGVO-compatible

[Carsten Trier]

Hello.
To make your theme faster and more data safety law (DSGVO)-compatible, I kindly ask, if is there a way to switch of “Google fonts” and to use “local fonts” instead.

The idea is to save the download time from google servers for the fonts and to make the whole thing DSGVO-compatible by not providing IP-Adresses of users to Google via Google fonts.

As a potential solution: I have heard, that some other themes offer to use “local” fonts, e.g. fonts, that were distriuted directly from the website server… I have heard, that there are a couple of free fonts available in internet that look pretty nice and load very fast (without any Ip-transfer-problem to google). So in the end, a solution to switch of  the connection to google fonts servers etc. is required and instead the solution to integrate “local fonts”.

Do you offer a solution or do you know a compatible plugin that meets requirement “data safety” and “make website faster”.

Thank you in advance?

Carsten | http://www.scheidung-potsdam-babelsberg.de

 

 

Regards Carsten

[Andy]

Hi,

Add the following php code to the functions.php file of a child theme:

function trusted_fonts_url() {
    return NULL;
}

This will stop the loading of fonts from Google, and the various elements of the theme will fallback to the next available font in the stylesheet.

For example, because the ‘Open Sans’ Google font is now not available, the ‘body’ element will use the next font in the list that the users browser has available… Helvetica, Arial or Verdana

body,
button,
input,
select,
textarea{
    font-family: 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
}

[Carsten Trier]

Ok, thank you. This is one first step. I will try to deal with it and see, how the “fallback fpnts” are looking in different browsers on different mobile.

Thank you for this first step. Carsten

[Andy]

To load your own font that is located on your website, you would load the font in the child theme’s style.css.

This is an example using the Roboto font from Google (Google fonts can also be downloaded for offline or ‘local’ usage)

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto.eot');
    src: url('../fonts/roboto.woff2') format('woff2'), url('../fonts/roboto.woff') format('woff'), url('../fonts/roboto.ttf') format('truetype');
}

In the example above, we’ll assume the font comes in 4 different file formats (.eot, .woff2, .woff and .ttf) and you have uploaded the font files to a folder named ‘fonts’ on your website.

Next you need to specify which elements are to use this font. Again in the style.css an example would be something like this:

body,
button,
input,
select,
textarea {
    font-family: 'Roboto';
}

or this:

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto';
}

[Author]

Posts