Hello all,

there is a small tutorial on this tutorial section called "Localize web fonts" : https://www.joomla51.com/tutorials/template-customization/localize-web-fonts

Hope this helps.

If you have any questions about this tutorial feel free to ask (me).

The descirption on the site that Thomas linked is nearly the same but they write the css for the fonts to the custom.css.
Thats possible too, but I don't do this because I use the custom.css for customizing the template and hundreds of lines of fonts css drives me mad

Thats why I create a seperate local-fonts.css and reference it in the fonts.php (or in similar other php scripts in older J51 templates like head.php or styles.php).

The css code for the fonts you get on google-webfonts-helper.herokuapp.com is referencing one directorey level down and then one up:
local-fonts.css is placed in j51_xxx/css folder.... it references one down to j51_xxx and one up to j51_xxx/fonts so the font fles must be placed in this folder.

This looks similar to this example:

/* aboreto-regular - latin */

@font-face {

  font-family: 'Aboreto';

  font-style: normal;

  font-weight: 400;

  src: url('../fonts/aboreto-v2-latin-regular.eot'); /* IE9 Compat Modes */

  src: local(''),

       url('../fonts/aboreto-v2-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('../fonts/aboreto-v2-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

       url('../fonts/aboreto-v2-latin-regular.woff') format('woff'), /* Modern Browsers */

       url('../fonts/aboreto-v2-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */

       url('../fonts/aboreto-v2-latin-regular.svg#Aboreto') format('svg'); /* Legacy iOS */

}

Its always the same way:

1. go to webfonts helper (link above) and search for the Google Font you want to localize.
   
2. check the styles of the font (500,600 ... and italic, bold and so on)
   
3. copy the css code below to custom css or own css (like kinda local-fonts.css)
   
4. place the css file to your css folder in your template folder (templates/j51_xx/css)
   
5. copy the ZIP file below the css of the webfonts helper page. Open ZIP file on your computer and load the font files to your webserver in the fonts template folder (templates/j51_xx/fonts) - yes, all of them....
   
6. if you placed the css code for the fonts in your own file, reference it in the fonts.php /templates/j51_xxx/inc I do this always after the for each loop with the Google fonts. This loop you should disable or delete even if you place the css code to your custom css. Thats important!
   

For me this worked on nearly 90 sites...

Regards
Oliver

I'm in Canada I don't have the same concerns with GDPR but would still love to see in the tutorials a How To of how to do this.

Thank you Oliver - must have scrolled right past it. Will follow the steps and check it out.