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.
How to load Google Font from local server
- f.gruber
- Phoca Member
- Posts: 39
- Joined: 12 Sep 2012, 11:47
- Jan
- Phoca Hero
- Posts: 47887
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: How to load Google Font from local server
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.:
3) and then just to use it e.g.:
Jan
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');
}
Code: Select all
body {
font-famitly: YourFontName;
}
If you find Phoca extensions useful, please support the project
- f.gruber
- Phoca Member
- Posts: 39
- Joined: 12 Sep 2012, 11:47
Re: How to load Google Font from local server
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.
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](http://grubit.at/screenshots/navbar_google.png)
Screenshot of the Navbar when the Google Font is loaded from local font folder in the template.
![Image](http://grubit.at/screenshots/navbar_local.png)
Is there a way to get the font in the exact same layout from the local source? Otherwise, many layout changes are pending.
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');
}
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](http://grubit.at/screenshots/navbar_google.png)
Screenshot of the Navbar when the Google Font is loaded from local font folder in the template.
![Image](http://grubit.at/screenshots/navbar_local.png)
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
- Phoca Member
- Posts: 39
- Joined: 12 Sep 2012, 11:47
Re: How to load Google Font from local server
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:
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.
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');
}
- Jan
- Phoca Hero
- Posts: 47887
- Joined: 10 Nov 2007, 18:23
- Location: Czech Republic
- Contact:
Re: How to load Google Font from local server
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
Jan
If you find Phoca extensions useful, please support the project