Google Fonts locally on the server

[knowmates]

Hi there,

I just tried to load the Google Fonts used on the website of our client locally via his webserver and NOT via the Google servers.

Therefore I identified the fonts, downloaded them, put them (EOT, SVG, TTF, WOFF, WOFF2) via FTP in the /wp-content/themes/x-child/fonts folder and added the ‘fonts-CSS’ code to the CSS via Theme Options.

Afterwards I used the plugin Autooptimize to remove the Google Fonts. By checking via Google Chrome > Sources I can still see the entries fonts.googleapis.com and fonts.static.com.

Then I changed the body and headings font in Theme Options > Typography from ‘Open Sans (Google)’ to ‘Arial (System)’, checked again in Chrome, but no changes.

Where is the mistake?

[basanta]

Hi @knowmates,

Thanks for writing in!
changing font in theme option should work. If that not loading the changed font family, the theme option may not be saved or you have any caching plugin which cash the cache already.
Please clear the plugin cache as well as server cache if any. If that doesn’t help please follow these steps.

1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.
2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.
3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
4. Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
5. Remove custom CSS, Javascript and templates.

In case the issue persists, would you mind providing us with login credentials so we can take a closer look? Please provide following information:
Set it as Secure Note

• Link to your site
• WordPress Admin username / password
• FTP credentials
  All the best!

[knowmates]

Hi there,

first of all - the steps I mentioned were correct, right?

Maybe there is a little misunderstanding.

The font we use on the website is Open Sans in different font-weights (300, 400, 400i, 700, 700i). These are the fonts I downloaded and put via FTP in the /wp-content/themes/x-child/fonts folder.

In the Theme Options > Typography we can set ‘Open Sans (Google)’ for the body and headings. Changing the font at this place does work as it should. If I use Arial e. g. the fonts will change. So maybe the steps you mentioned are not neccessary?

If we use that option with ‘Open Sans (Google)’ the connection to the Google servers will automatically take place. To remove the connection to the Google servers I changed that two font settings to ‘Arial (System)’ although we are not using Arial on the website. I used this change like a pseudo font.

Best regards

[rad]

Hi @knowmates,

Any custom font added through custom CSS will not be added to Theme Option’s typography setting. I recommend adding your font through font’s manager.

Please go to Theme Options and click the Cog (gear) icon, then go to font section and add your custom font like here

Then once added, you can create your own font template and select your added custom font

Then with your created font template where your custom font is assigned, you can then assign your font template to your typography setting in Theme Options or to your v2 elements.

Thanks!