How to load Google Font from local server

Phoca Templates - templates for Joomla! CMS
User avatar
f.gruber
Phoca Member
Phoca Member
Posts: 39
Joined: 12 Sep 2012, 11:47

How to load Google Font from local server

Post by 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.
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47794
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: How to load Google Font from local server

Post by 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
If you find Phoca extensions useful, please support the project
User avatar
f.gruber
Phoca Member
Phoca Member
Posts: 39
Joined: 12 Sep 2012, 11:47

Re: How to load Google Font from local server

Post by 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
Image

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

Is there a way to get the font in the exact same layout from the local source? Otherwise, many layout changes are pending.
User avatar
f.gruber
Phoca Member
Phoca Member
Posts: 39
Joined: 12 Sep 2012, 11:47

Re: How to load Google Font from local server

Post by 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.
User avatar
Jan
Phoca Hero
Phoca Hero
Posts: 47794
Joined: 10 Nov 2007, 18:23
Location: Czech Republic
Contact:

Re: How to load Google Font from local server

Post by 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
If you find Phoca extensions useful, please support the project
Post Reply