Google Fonts

Hello, is there a way to integrate Google Fonts in the local theme. There is a problem with German data protection law.

Edited by

If you mean download them and load them locally, no. That can't be done.

Edited by

Hello Tim, i have the same problem as @RolandS. I live in Germany and also our site is hosted in Germany. I got also post from a german lawyer. It was a dissuasion over appr. 170 EUR about google getting personal data from the person that is browsing the site. In Germany also the IP counts a private data and because google servers are located in the US (+whatever...).

According to the German law a technical solution is seen in preventing the dynamical load of the fonts from the google servers and load them instead locally. I think the German data protection law represents somehow European law... Not sure about it, I'm fotographer not a lawyer!

Tim, I don't want to start a discussion about pro and cons of the German/European data protection laws!
But can you PLEASE help with a suggestion how to get the (used) google fonts locally loaded from the web server? I'm quite sure all your european customers would appreciate a solution for this problem very much!

Thanks, Zuzana

Edited by

Here is a guide to go by.

In your Sytist admin go to Design -> Edit My Theme. Click Manage Google Fonts in the left menu. Delete any fonts selected there and save. This will make it not load the google fonts URL.

Go to https://fonts.google.com/

Find the fonts you want to use. 

Click Download Font Family

Extract zip file.

Using your FTP program connect to your site and navigate to the folder your Sytist is installed in then into the sy-misc folder.

Create a new folder called fonts.

Upload the extracted font files into that folder.

In your Sytist admin, Design -> Edit My Theme. 

Additional CSS in the left menu.

The code below is what loads the fonts and styles you want to use. This example we are using Lato and Roboto font families and adding light & bold variations. You will need to ensure the path to the fonts are correct.

@font-face {
  font-family: 'Lato';
  src:
       url('/sy-misc/fonts/Lato-Light.ttf') format('truetype');
       url('/sy-misc/fonts/Lato-Bold.ttf') format('truetype');
       url('/sy-misc/fonts/Lato-LightiIalic.ttf') format('truetype');
       url('/sy-misc/fonts/Lato-BoldItalic.ttf') format('truetype');
}


@font-face {
  font-family: 'Roboto';
  src:
       url('/sy-misc/fonts/Roboto-Light.ttf') format('truetype');
       url('/sy-misc/fonts/Roboto-Black.ttf') format('truetype');
}


You will not be able to select the font with the theme editor so you will have to assign what fonts to use with this code to the additional CSS: 

/* main font family */
 html, body, p, div, span {
        font-family: 'Lato','cosmic sans',sans-serif;  
 }
/* titles */
H1,H2,H3 {
        font-family: 'Roboto',sans-serif;  font-weight: bold;
 }


You need to make sure the font types are the same as you downloaded and the names are correct.

Edited Sun Nov 06, 22 4:31 AM by Tim - PicturesPro.com