How to load Google Font from local server

[f.gruber]

Hi,
I am using the Gweld template. A Google Font is used in this template.

For data protection reasons, I no longer want to integrate Google Fonts from the Google server.
I am still using Joomla 3.10.11

I tried the following steps:

I looked for the Font Open Sans on https://google-webfonts-helper.herokuapp.com/

I downloaded the font files from here: https://google-webfonts-helper.herokuap ... sets=latin
and extracted the files in templates/phoca_gweld/fonts.

Then I copied the necessary CSS code into templates/phoca_gweld/css/custom.css.. The CSS file custom.css is loaded by the Joomla plugin Add Custom CSS.


In templates/phoca_gweld/index.php I see the line of code, where the Google Font is loaded from the Google server. I suppose, this line has to be changed or deleted.
<link href='https://fonts.googleapis.com/css?family=<?php echo $nameGFont1; ?>&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

Deleting this line lets the site fall back to a not very beautiful font. The local saved Google Font obviously does not get loaded.

I am very grateful for every hint.

[Jan]

Hi, when you wan to load local font, then you need:

1) to transform the font from ttf or otf to woff or woff2
2) then you need to load it, the best way per CSS, e.g.:

Code: Select all

@font-face {
    font-family: 'YourFontName';
    src: url('./url/to/your/font/YourFontName.woff2') format('woff2'),
         url('./url/to/your/font/YourFontName.woff') format('woff');
}

3) and then just to use it e.g.:

Code: Select all

body {
   font-famitly: YourFontName;
}

Jan

[f.gruber]

I added this CSS declarations to the template.css file. It did not work in custom.css, don't know why, but it does not matter.

Code: Select all

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'),
         url('../fonts/open-sans-v34-latin-300.woff') format('woff');
}

But a little problem remains:

The local saved font looks different from the original font loaded directly from Google

Screenshot of the Navbar as it looks with the Google Font loaded from the Google server


Screenshot of the Navbar when the Google Font is loaded from local font folder in the template.


Is there a way to get the font in the exact same layout from the local source? Otherwise, many layout changes are pending.

[f.gruber]

Seems that I myself could solve the problem:

I found the font "Open Sans Condensed" as TTF font here: https://www.fontsquirrel.com/fonts/open-sans-condensed

I downloaded and unpacked the font files and then I converted the TTF file to WOFF format: https://convertio.co/de/ttf-woff/

Now I added this lines to the template.css:

Code: Select all

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('../fonts/OpenSans-CondLight.woff') format('woff');
}

Now the layout of the local saved font looks as expected. But I must admit, that until now I tested only with Firefox and Chrome browser.

[Jan]

Hi, if you have tested it on Firefox and Chrome then you have covered most of the browsers (as many others are based on the same core like chrome)

Jan