[Resolved] GDPR (and Google Fonts)

[Sebastian]

Hi Tom,
from what I just heard/read yesterday using Google Fonts won’t be so easy in the future because of GDPR. At least for us in europe.

So we would have to download the Google Fonts and install/upload them ourselves on our site and enqueue them. What (update-safe) routine is there to enqueue fonts on our site with GeneratePress?

Btw this also relates to Fontawesome. We would also have to enqueue Fontawesome ourselves.

Basically in europe we either need the consent of our visitors beforehand, so that we can use or send data from servers outside the EU or we just don’t use ressources from outside the EU. And getting consent for each and every item is hard. So we will have to make modifications to our sites.

Can you please advise on the routine to enqueue said fonts update-safe in GP?
Thanks. 😉

[Tom]

Hi there,

Font Awesome is hosted within the theme, so no issues there.

For Google Fonts, you would need to download the font files, and then load it up using @font-face:

So you would upload your fonts into your child theme directory.

Then add this CSS:

@font-face {
  font-family: 'Your Font Name';
  src: url('URL-TO-YOUR-CHILD-THEME-FOLDER/font-file-name.eot'); /* IE9 Compat Modes */
  src: url('URL-TO-YOUR-CHILD-THEME-FOLDER/font-file-name.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('URL-TO-YOUR-CHILD-THEME-FOLDER/font-file-name.woff2') format('woff2'), /* Super Modern Browsers */
       url('URL-TO-YOUR-CHILD-THEME-FOLDER/font-file-name.woff') format('woff'), /* Pretty Modern Browsers */
       url('URL-TO-YOUR-CHILD-THEME-FOLDER/font-file-name.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('URL-TO-YOUR-CHILD-THEME-FOLDER/font-file-name.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Then you can add the font to the Customizer like this: https://docs.generatepress.com/article/generate_typography_default_fonts/

I also don’t think the GDPR will be an issue with Google, as their data privacy compliance is outstanding.

[Sebastian]

Hi Tom,

thank you very much for this detailed answer.
This will do the job I think.

Even though our lawyers in Germany already write about the issue that Google (fonts) will become an issue under GDPR. So maybe it’s just a local thing and maybe it won’t be such a big topic in the long run but since we have a lot of law suits in germany regarding _everything_ related to privacy I want to be on the safe side. 🙂

Thanks again.
Best regards.

[Tom]

Totally understand 🙂

Glad I could help!

[Florian]

Hi Tom,

I am from the EU as well and I think it is really an issue now in the EU and affect most of the GeneratePress-users in the EU.

I have a question to the solution you described above. When the Google Font name of the self hosted font is the same as the font hosted by Google, how can the customizer distinguish the self- and the google-hosted font. And how can I be sure that I have chosen the right one (if I do not want to go deep in the developer tools 🙂 ).

Do you have plans for implementing a user-friendly solution for this whole GDPR-Google Fonts issue? (For example a checkbox where you can decide, if you want to use the fonts hosted by Google or by yourself, maybe with an upload-functionality for the lazy guys like me 🙂 )

Thanks and best regards.

[Tom]

When we use this filter, GeneratePress won’t call Google: generate_typography_default_fonts

That filter will add the font to the System Fonts section of the Typography control, which is completely separate from the Google Fonts section.

I’ve looked into an upload functionality for fonts, but WordPress doesn’t allow those files to be uploaded for security purposes. There’s ways to bypass that, but I’d prefer to keep things 100% secure.

[Florian]

Hi Tom,
thanks a lot for your answer. I think this is a good and sufficient solution.

[Tom]

No problem! 🙂

[Philippe]

Hi Tom!
I’m using a system font, but there is the following external call to maxcdn.bootstrapcdn.com anyway:
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ver=4.9.6

I would like to remove this call because of the GDPR topic, too.

Thanks for your help an best regards!

[Tom]

GP isn’t making that call. It could be coming from one of your plugins 🙂

[Jiri]

Hi Tom,

following your instructions, everything is going well, Google fonts loaded locally, but now I am stuck with generate_typography_default_fonts filter.
It is working as well, but I cannot find out the right syntax for more fonts than one.

I mean: in the filter there is a part reading:
$fonts[] = ‘Roboto’;

but how to take more than one? ‘Roboto’ plus ‘something’ plus ‘something’

Going through manuals and cannot find the right syntax for multiple ‘somethings’

A little help for dummies would be very appreciated.

Thanks a lot!

[Tom]

Hi Jiri,

You would do this:

add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'My Font Name';
    $fonts[] = 'Another one';
    $fonts[] = 'One more';

    return $fonts;
}

[Jiri]

WoW!!! More simple than expected. Also, this elegant vertical solution did not cross my mind. Was looking for a horizontal one, like + + +.

Thank you!

[Tom]

You’re welcome 🙂

[Jiri]

Thank you, Tom,

nearly everything is fine – in Firefox – but in Chrome after having loaded the local fonts, after some delay it is loading the fonts the second time, this time from Google. And this seems to be the case only in Chrome.

Maybe you could explain or advise some solution?

Thank you

j

[Author]

Posts