Recent
Categories
View Replies (14)

Localize web fonts

0
Votes
Undo
  1. Oliver
    Oliver
  2. Sherlock Holmes The Voice
  3. News / Announcements
  4. Tuesday, 14 December 2021
  5.  Subscribe via email
Hello Ciaran,

I am quite not sure, if this forum category is the right place for my feature request. Pls move it, if necessary.

I wonder if it is not possible to add a possibility to localize the webfonts.
Currently the fonts are almost Google Webfonts that are called directly form the Google fonts server. In the European GDPR it is recommended to localize the font files so there is no connection to a Google server, which stores personalized data like IP addresses in the US.
Currently I am doing like this:

  • I got to https://google-webfonts-helper.herokuapp.com/fonts and search the font I am using (or more than one but than one after the other). I check the styles I want to use and copy the css code. This code I store in a CSS file which I call local-fonts.css and upload it to templates/j51_xxx/css/
  • Then i download the prepared ZIP file at the end of the css code section on the webfonts helper page. I unpack it and upload the font files to templates/j51_xxx/fonts/ . Now the references in the CSS file local-fonts.css point to the correct font files (e.g.: url('../fonts/gudea-v10-latin-regular.woff2') format('woff2') points to ../fonts/ which is the directory whrere I uploaded the font files)
  • the last step is the most critical one, because it will be overwritten in case of a template update. I open the file templates/j51_xxx/inc/fonts.php. There I disable the lines with the loop, starting with "foreach ($googlefonts as $v) { // loop" and add a line below which contains: $app->getDocument()->addStyleSheet('/templates/j51_xxx/css/local-fonts.css');


Now all my webfonts are called from my local webserver.

Maybe its an idea to set a folderpath in the template for a local fonts file. And if local fonts = YES then set the value also in the fonts.php.
Then the files upload and the local-fonts.css content must still be done by the user, but the danger of overwriting the fonts.php is no longer available.

If this is not possible maybe its possible to add this as tutorial article. In this case I would write it more detailed.

Regards
Oliver
Responses (14)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Oliver

This is very helpful indeed. With your permission we would love to include this in our tutorial section as it is a question that comes up quite often.

Wish in you and yours a very happy new year :)

Ciaran
  1. more than a month ago
  2. News / Announcements
  3. # 1
Oliver
Oliver
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,
sorry for my late reply.

Of course you can use this, if you want, I send you a more detailed tutorial.

Regards
Oliver
  1. more than a month ago
  2. News / Announcements
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Oliver

This tutorial is now available in our tutorials section (https://www.joomla51.com/tutorials/template-customization/localize-web-fonts).

Ciaran
  1. more than a month ago
  2. News / Announcements
  3. # 3
altun_ha
altun_ha
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Oliver, Hello Ciaran,

I use the j51_jasmine template and followed these instructions exactly to host the fonts locally. Unfortunately it doesn't work for me and I get an error message when I call up the page.

0 unmatched '}'

I've attached a screenshot.

Am I missing something or am I still doing something wrong?

Please excuse my bad English, I use google translate.

Greetings Olaf
Attachments (1)
error.jpg error.jpg
  1. more than a month ago
  2. News / Announcements
  3. # 4
altun_ha
altun_ha
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Solved
I have made a mistake.
It works now.
excuse
  1. more than a month ago
  2. News / Announcements
  3. # 5
Silvio
Silvio
Accepted Answer Pending Moderation
0
Votes
Undo
I use the j51_layla template and followed the instructions exactly to host the fonts locally. Unfortunately it doesn't work. I get an error message
I have attached a screenshot.
what am I doing wrong

Silvio
Attachments (1)
Screenshot (1).png Screenshot (1).png
  1. more than a month ago
  2. News / Announcements
  3. # 6
Oliver
Oliver
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Silvio,
I assume you are using Joomla 4 Layla template.

Pls check the following steps:
1. Store all font files in the folder: "templates/j51_layla/fonts".
2. The path to the local-fonts.css is "templates/j51_layla/css/local-fonts.css". Be sure to have included all the css to the font files.
3. edit the fonts.php in templates/j51_layla/inc/fonts.php :
Disable the last two lines like this:


/* foreach ($googlefonts as $v) { // loop

	$app->getDocument()->addStyleSheet('//http://fonts.googleapis.com/css?family=' . $v . ':' . $font_weights . '&&subset=' . $font_subset . '&display=swap');

} */

I then add the last line:


$app->getDocument()->addStyleSheet('/templates/j51_layla/css/local-fonts.css');


I hope this will help.
Oliver
  1. more than a month ago
  2. News / Announcements
  3. # 7
Silvio
Silvio
Accepted Answer Pending Moderation
0
Votes
Undo
hi Oliver thanks for your answer, I'm not using the layla template for joomla 4, the three points you described are ok, I am attaching the font.php file, I can't understand 1. disable the last two lines like this 2.I then add the last line I am attaching files. Sorry for my English.

Hello Silvio
Attachments (2)
my fonts.php.png my fonts.php.png
Oliver.png Oliver.png
  1. more than a month ago
  2. News / Announcements
  3. # 8
Oliver
Oliver
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Silvio,
sorry for my late replay.

In your fonts php the last two lines begin with the loop "foreach...."
You can disable this loop by adding /* before the "foreach"
and */ after the last }.
Alternativly just delete the last two lines.... works too ;)

Example:


/* foreach ($googlefonts as $v) { // loop

	$app->getDocument()->addStyleSheet('//http://fonts.googleapis.com/css?family=' . $v . ':' . $font_weights . '&&subset=' . $font_subset . '&display=swap');

} */


add last line like this


$app->getDocument()->addStyleSheet('/templates/j51_layla/css/local-fonts.css');


This all only makes sense if you are using a local-fonts.css file.
Alternatively you can also copy the fonts css code in the custom.css file (I am not a fan of this, because I want to divide customizing the style of the site and localising the fonts).
If you only use the custom.css you do need only the first point: disable or delete the two last lines in the fonts.php.

Hope this helps.

Oliver
  1. more than a month ago
  2. News / Announcements
  3. # 9
Seminara
Seminara
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Oliver,

I am using the template "Nocturne".
I read and followed the instructions to load the fonts from my local server instead of the google server from the description for the Layla template.
I did the following:
1. Store all font files in the folder: "templates/j51_layla(nocturne)/fonts".
2. The path to the local-fonts.css is "templates/j51_layla(nocturne)/css/local-fonts.css". Be sure to have included all the css to the font files.

3. edit the fonts.php in templates/j51_layla(nocturne)/inc/fonts.php ----> There is no folder called "inc" and no file called "fonts.php"

I found a file called "googlefonts.php" (templates/j51_nocturne/elements/googlefonts.php).
Should I modify this file ? And if yes, how do I have to do it ? Or is the procedure for Nocturne completely different to the one of Layla ?

Thank you for your help.
Philippe
  1. more than a month ago
  2. News / Announcements
  3. # 10
Oliver
Oliver
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Philippe,
I am sorry, I do not own one of these very old templates but maybe i can help you nevertheless.
There should be a folder named j51_nocturne/php which should be include a styles.php file.

If yes I would like refer to this post I did around a month before:
https://www.joomla51.com/forum/j51-enlighten-fonts-php#reply-43276

I hope this helps :)

Regards
Oliver
  1. more than a month ago
  2. News / Announcements
  3. # 11
crimle
crimle
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
There is a plugin that prevents Google Fonts from being loaded from the Google Server. It installs Google Fonts locally. Feel free to try it. You will find it here:
https://github.com/joomtools/plg_system_jtaldef

And here is a link to a Google Fonts Checker Tool:
https://sicher3.de/google-fonts-checker/
  1. more than a month ago
  2. News / Announcements
  3. # 12
Seminara
Seminara
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Crimle,

thank you for your advice. I am already using jtaldef.
It works fine for some websites built with other templates but unfortunately not for the website built with J51-Nocturne.
So I had to embed the fonts to the local server manually. Thanks again to Oliver who helped me to do it.
  1. more than a month ago
  2. News / Announcements
  3. # 13
flyingalex
flyingalex
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Oliver,
first of all, thank you for taking the time to write this tutorial.
I followed all the steps as described, but there still seems to be some error...

Would you mind checking my settings? Do you need more info?
(I am using J51_Riley with the two fonts "Rubik" and "Montserrat".)
Attachments (3)
fontsphp.PNG fontsphp.PNG
cssfile.PNG cssfile.PNG
fontfiles.PNG fontfiles.PNG
References
  1. https://test.flugplatz-tirschenreuth.de/
  1. more than a month ago
  2. News / Announcements
  3. # 14
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.