[Resolved] Host Google Fonts locally

[Nico]

Hi There!

We have embedded a number of Google fonts on our GeneratePress pages and now want/need to replace them with locally hosted fonts.

How can we determine which Google fonts we have integrated via GeneratePress and how can we replace these fonts completely with local fonts as easily as possible?

Is there a GeneratePress “function” for this?

thnx for hleping
Nico

[Ying]

Hi Nico,

Are you using the dynamic typography system?
https://docs.generatepress.com/article/dynamic-typography-overview/

If so, if you un-toggle the Google font option, GP will no longer send out Google fonts requests.

But if there are any other plugins using Google fonts, GP can not control that.

[Nico]

Good Morning Ying!

Yes, we are using the dynamic typography system as you can see at the screenshot. But I dont know how I can un-toggle the Google font option. Did I have to re-assign the whole stuff again? or can I change the existing assignments?

In this example I want to change the BODY Open Sans font to a local hosted font but I dont know where I can do it.

thnx for hleping
Nico

[Ying]

But I dont know how I can un-toggle the Google font option

It’s in the font manager, click on the arrow next to Open Sans, you can see the Google font option.

In this example I want to change the BODY Open Sans font to a local hosted font but I dont know where I can do it.

Check this documentation, especially the video, you should have an idea of how to use local fonts:
https://docs.generatepress.com/article/adding-local-fonts/

[Nico]

Hi Ying,

ok, I think we got it.

Only one tiny problem left. If you look at the menu at link one and then at link two, you can see that the font is changeing now.

https://www.hello-world.net/
https://www.hello-world.net/category/jakobswege/

Can you give us a hint to solve this problem?

thnx in advance
Nico

[Fernando]

Hi Nico,

Have you added the @font-face rules? Also, in the Typography Manager, can you make sure that Open Sans Google Font is not enable. Example: https://share.getcloudapp.com/v1uQLpKl

If the issue persists after this, can you try clearing cache?

[Nico]

Hi Fernando,

I cleared the cache again. No change. In the Typomanager I deactivated Open Sans Googe Fonts (see screenshot).

Unfortunately I can’t do anything with “Have you added the @font-face rules”. Where can I check this?

https://immarketingforum-my.sharepoint.com/:i:/g/personal/marcuz_hello-world_net/EfDETDxHNcNPgi0EJhVi5C8BoO2Qv9IH9OnaXAQ-PamJBA?e=KbF5lI

[Ying]

In this documentation, we listed the steps to host local fonts, you can find how to add @font-face CSS as well:
https://docs.generatepress.com/article/adding-local-fonts/

If you haven’t added @font-face CSS, how did you host the local fonts? Is there any plugin or 3rd party instructions you were following?

Let us know!

[Nico]

Ying, we checked the documentation. As you can see on the screenshot, we have disabled Google Fonts in the GP Customizer. We understand that this will automatically host the Google Fonts locally.

https://immarketingforum-my.sharepoint.com/:i:/g/personal/marcuz_hello-world_net/EceNxrR3j2hOrD9_uql9Z1cBK4TyuSTWbIbFpdn5mCzsxQ?e=YjnDXA

[Fernando]

I see. To clarify, have you added the @font-face rules as mentioned in the document?

Currently, viewing your site, I can’t see it added.

[Nico]

Fernando, if I copy the following code into our Sniptes-Pluging:

/* open-sans-regular – latin */
@font-face {
font-family: ‘Open Sans’;
font-style: normal;
font-weight: 400;
src: url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.svg#OpenSans’) format(‘svg’); /* Legacy iOS */
}

we got the following error in our php errorlog

[04-Oct-2022 07:14:24 UTC] PHP Parse error: syntax error, unexpected ‘{‘ in /kunden/customer_id/webseiten/hello-world.net/wordpress/wp-content/plugins/code-snippets/php/admin-menus/class-edit-menu.php(248) : eval()’d code on line 2
[04-Oct-2022 07:14:24 UTC] PHP Fatal error: Exception thrown without a stack frame in Unknown on line 0

[Fernando]

It should be placed in Appearance > Customize > Additional CSS.

[Nico]

Ohh, I thought until now you could save any code in Appearance > Customize > Additional CSS or in the Snippet Plugin.

Fernando, we have now saved the code under Additional CSS.

However, when I call up the page https://www.hello-world.net/via-jacobi/, fonts are still loaded from the Google server (see screenshot).

What are we doing wrong?

[Fernando]

To test, can you try changing the font-family name in your @font-face. Set it to ‘My Custom Font’ for instance.

Then, in your Typography module, use My Custom Font instead of Open Sans.

Example: https://share.getcloudapp.com/p9uQ6XqP

https://share.getcloudapp.com/QwudL4pj

https://share.getcloudapp.com/E0uZgo0O

[Nico]

Ok, I’ve changed the font-family name in the customizer like this:

/* open-sans-regular – latin */
@font-face {
font-family: ‘My Custom Font’;
font-style: normal;
font-weight: 400;
src: url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-regular.svg#OpenSans’) format(‘svg’); /* Legacy iOS */
}
/* open-sans-700 – latin */
@font-face {
font-family: ‘My Custom Font’;
font-style: normal;
font-weight: 700;
src: url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-700.eot’); /* IE9 Compat Modes */
src: local(”),
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-700.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-700.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-700.woff’) format(‘woff’), /* Modern Browsers */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-700.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘https://www.hello-world.net/wp-content/uploads/open-sans-v34-latin-700.svg#OpenSans’) format(‘svg’); /* Legacy iOS */
}

and I reassigned the whole stuff in the Typography module.

You can check the result here. 🙁

https://www.hello-world.net/via-jacobi/

[Author]

Posts