Hosting Google Fonts Locally – How to Add Styling

Hi there,

1. This should help:
https://docs.generatepress.com/article/adding-local-fonts/

2. What styling are you referring to? Can you link us to the page in question?

Hello Leo,

Thank you very much for your quick response.

I did find that article before contacting you. It’s quite a bit beyond my skill level. Sorry. This is why I used the plugin OMGF. It analyzed a page that had all the the font type we used and all the variable. It then generate the stylesheet and put it on the server, and had an option to disable Google Fonts on the website.

It did work, but the styling was removed. By styling, I mean the unique characteristics such as color, for example.

I do have screenshot of before and after if there is a way to send them to too. In order to provide you with a live example, would have to enable the plugin, which would cause the fonts to display incorrectly until you were able to look at them.

Is there a way to send you the screenshots? I don’t see an option to do so via this messaging system.

Again, thank you for your time and have a good day.

Cheers!

• This reply was modified 4 years, 11 months ago by nevrsmer.

Screenshot doesn’t help with issues like this unfortunately.

Can you activate the plugin and link me to the site so I can see what’s overwriting the style in the customizer?

Hi Leo,

Sorry. The plugin has been activated. The URL is: https://www.arenasfoto.com

In case you need it, the font types on style sheet generated by OMGF plugin: Lato (Latin) normal & Italic: 100, 300, 400, and 700.

Thank you!

I’m not seeing anything unusual here:
https://www.screencast.com/t/53yXxsFWkxy

Should I be looking at a specific element?

Hello Leo,

Thanks for getting back to me!

I really don’t know what to say. It looks like the correct font type and sizes are listed (remember, I have no coding experience, and I am new to WordPress).

All I can say is the font looks different when Google Fonts is NOT hosted locally and when it IS hosted locally. Why that’s the case is beyond me, and is what I am trying to figure out with your help and divine patience.

Below are URLs for 2 images. Both images are of a section of text on the homepage I sent you the URL for. One image shows the text when Google Fonts is NOT hosted locally. The other image shows the same front when Google Fonts is IS hosted locally. It’s clear they look different. For some reason, the styling is not being applied when Google Fonts is hosted locally and disabled (by disabled, I mean there is an option on the OMGF plugin that disables Google Fonts from loading from an external source, at least that’s what I understand).

1. Image showing Google Fonts NOT hosted locally (this is how the “styling” is supposed to look): https://www.screencast.com/t/R1FFsMqeYes

3. Image showing Google Fonts hosted locally: https://www.screencast.com/t/97lBobiSb624

Please let me know if you have any issues viewing the images. I just signed up for this service, so I’m not sure if I used it correctly.

Again, many thanks for your time and patience.

So is the plugin currently disabled or enabled?

Any chance you’ve checked with the plugin author and see if he is able to offer some insight?

Hello Leo,

When I sent the message containing: “Sorry. The plugin has been activated. The URL is: https://www.arenasfoto.com”, the plugin was activated.

About 30 minutes after you sent the email containing: “I’m not seeing anything unusual here:
https://www.screencast.com/t/53yXxsFWkxy”, I deactivated it as the font looked bad.

When you sent the above message, the plugin was activated.

Yes, I’ve reached out to the developer, but you know how that goes.

If I host fonts locally as explained in the article you sent (https://docs.generatepress.com/article/adding-local-fonts/), will I run in to this same issue?

I opted for the plugin given that for me it was the easiest option and ensured I would not perform a task incorrectly and then have serious issues with the site.

For clarity, will I run into that styling issue if I host fonts locally as per said article?

Thank you for all your time. I appreciate it greatly!

You shouldn’t run into that issue if you use our method – at least it would be easier for us to debug ??

Hello Leo,

Thanks for replying on a Saturday!

I have a few questions regarding hosting fonts locally as per the article you sent (https://docs.generatepress.com/article/adding-local-fonts/).

For reference, we don’t have a child theme.

1. How can I determine which Google Fonts we need (I know which font family it is. I’m referring to the size and type – normal/italic) to make sure I download the fonts need for the entire site?

2. I’d like to upload the fonts directly to the server as the method of uploading them via the Media Libray actually looks more complicated. Do you happen to have a KB on how upload Google Fonts to the server that details the path to the folder where the fonts should be upload, if there is a need to create a new folder, what to do after uploading the fonts to the server, and any other relevant details?

3. Is it possible to use a program such as Code Snippets to upload fonts to the server?

Again, many thanks and enjoy the rest of your weekend.

Cheers!

Hi there,

1. This depends on the kind of text you’ll need on your site. If you’ll need some italic text, you’ll want to include an italic variant (if it’s available). Same with the weights – if you need a bold font, you should choose at least one bold variant. Don’t choose too many variants, as the more you choose, the heavier your page will be.

2. Are you familiar with using a File Manager or FTP program? If so, you could create a fonts folder in the root directory of your WordPress install. That’s the folder that has these folders in it:

wp-admin
wp-includes
wp-content

3. Yes, you can use Code Snippets to add the PHP to your site.

Let me know if you need more info ??