Archived topic

Host Google Fonts locally

18 replies · Started by Nico on October 1, 2022

Viewing posts 1–15 of 19

October 1, 2022 at 4:32 am #2359623

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

October 1, 2022 at 11:32 am #2360011

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.

October 2, 2022 at 12:35 am #2360273

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

October 2, 2022 at 11:24 am #2360773

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/

October 3, 2022 at 1:05 am #2361162

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

October 3, 2022 at 1:14 am #2361174

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?

October 3, 2022 at 1:35 am #2361189

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

October 3, 2022 at 9:53 am #2361783

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!

October 3, 2022 at 11:05 pm #2362262

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

October 3, 2022 at 11:40 pm #2362271

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.

October 4, 2022 at 12:19 am #2362305

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

October 4, 2022 at 12:25 am #2362311

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

October 4, 2022 at 1:34 am #2362384

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?

October 4, 2022 at 1:45 am #2362387

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

October 4, 2022 at 2:09 am #2362409

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/

This archived topic is closed to new replies.

Start building better websites today.