[Resolved] Hosting Fonts Locally

[Andres]

Hello,

I have a question regarding your tutorial on Adding Local Fonts: https://docs.generatepress.com/article/adding-local-fonts/

In the section Uploading Our Font, it looks like two options are referenced, but only one of them is explained.

This is the part I am having trouble understanding: “Note: If you’re comfortable with uploading files to your server via FTP, you can skip this step and simply upload your font files to your child theme.”

I am fine with uploading files to the server via FTP. What I don’t understand is which files do I upload to the child theme, into which folder in the child theme to I upload them, and then what to do afterwards.

After the above referenced section, it explains how to upload the files via the Media Library if one is not comfortable doing it via FTP to the child theme, but then it does not explain how to do it via FTP.

Could you please explain how to add fonts locally to the child theme via FTP, and then where I should pick up in the instructions after uploading the necessary font file? Is there another GP tutorial on how to do this using FTP?

Thank you, and have a good day!

Cheers,

Andrés

[Tom]

Hi there,

The FTP option involves uploading the font files( .ttf, .woff files etc..) to the child theme folder. You could create a new folder named fonts, and upload the files into that folder.

Then when linking to the files in @font-face, you would like to yourwebsite.com/wp-content/generatepress-child/fonts/xx.woff.

Let us know if you need more info 🙂

[Andres]

Hi Tom,

Thanks for the response.

Would the following steps be correct (after downloading the font)?

1. Create folder in the child theme titled “fonts” (for example)

2. Upload the downloaded font files to the folder “fonts” in the child theme.

For example, these font files:

lato-v16-latin-300.eot
lato-v16-latin-300.svg
lato-v16-latin-300.ttf
lato-v16-latin-300.woff
lato-v16-latin-300.woff2

3. Create the URL for the CSS with a path that leads to the “fonts” folder in the child theme (for the next step)

For example: yourwebsite.com/wp-content/generatepress-child/fonts/

4. Return to ogle Webfonts Helper and input this URL in the Customize Folder Prefix to create the required CSS, for example, using the URL in step 3:

/* lato-300 – latin */
@font-face {
font-family: ‘Lato’;
font-style: normal;
font-weight: 300;
src: url(‘yourwebsite.com/wp-content/generatepress-child/fonts/lato-v16-latin-300.eot’); /* IE9 Compat Modes */
src: local(‘Lato Light’), local(‘Lato-Light’),
url(‘yourwebsite.com/wp-content/generatepress-child/fonts/lato-v16-latin-300.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘yourwebsite.com/wp-content/generatepress-child/fonts/lato-v16-latin-300.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘yourwebsite.com/wp-content/generatepress-child/fonts/lato-v16-latin-300.woff’) format(‘woff’), /* Modern Browsers */
url(‘yourwebsite.com/wp-content/generatepress-child/fonts/lato-v16-latin-300.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘yourwebsite.com/wp-content/generatepress-child/fonts/lato-v16-latin-300.svg#Lato’) format(‘svg’); /* Legacy iOS */
}

5. Copy and paste this CSS in either Simple CSS or in the CSS field in Customizer

6. Incorporate the font in Customizer > Typography

Input the following code in: child theme > functions.php, replacing Open Sans with the name of the desired font, in this case ‘Lato’.

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Open Sans';

    return $fonts;
} );

7. Select the Font in Customizer > Typography and verify it’s no longer loading externally.

Is this correct?

Our site is currently in development. Our domain is not pointing to it yet, and therefore does not have the domain name in the URL. Would you recommend waiting until the site is live with the domain pointing to it to do this to avoid issues with the URLs in the CSS?

Thank you, Tom, and have a good day.

Cheers!

Andrés

[David]

Hi there,

yes, those steps look correct.
In regards to the Domain – not an issue as long as you update your @font-face URLs when the site is live.

[Andres]

Hello David,

Thank for for confirming.

Have a good day!

Andrés

[David]

You’re welcome

[Andres]

Hi David,

I implemented the steps I listed for adding fonts locally, and it did not work out. The font type did appear in System Fonts, but it did not look like Lato font for some reason.

Instead, I used a plugin we use on our current live site – the one we are replacing with the site we are developing – called OMGF Optimize My Google Fonts, which hosts fonts locally. Thought I was really hoping to not add another plugin, it’s a very easy to configure and straightforward plugin, in case you are ever asked for such a plugin.

OMGF: https://wordpress.org/plugins/host-webfonts-local/

Thanks, David, and have a good day.

Cheers!

Andrés

[David]

Glad to hear you found a solution and thanks for sharing.

[Andres]

You are welcome, David.

Have a good one.

[Roger]

This is really late input (but I hope it adds to helpful options for someone in the future) – I found this plugin: https://wordpress.org/plugins/host-webfonts-local/ and it works great!
All I needed to do was go into the GeneratePress font settings, to get a listing of the correct fonts to preload.
Worked well for me, so I hope it’s an option that might help others?

[David]

Hi there,

yep OMGF is a good alternative. Thanks for sharing.

[vienna22]

6. Incorporate the font in Customizer > Typography

Input the following code in: child theme > functions.php, replacing Open Sans with the name of the desired font, in this case ‘Lato’.

add_filter( ‘generate_typography_default_fonts’, function( $fonts ) {
$fonts[] = ‘Open Sans’;

return $fonts;
} );

7. Select the Font in Customizer > Typography and verify it’s no longer loading externally.

Hello David,
At first: I have followed the above tutorial to the letter. And it looks like it will work. Then I found this thread.

To 6) Is this only necessary in Child-Themes?

To 7) What is your recommendation for doing this? With a plugin or with some code?

Annotation: Although I used the filter mentioned, the editor refused to upload TTF-files. I did it manually with FTP.

Greetings from Vienna and stay healthy!

[David]

Hi there,

first off – we have made some changes to Typography in GP 3.1
Can you confirm if you’re using the new Dynamic Typography? See here:

https://docs.generatepress.com/article/dynamic-typography-overview/

Let me know

[vienna22]

I am using the latest Version of GP Theme and Plugin.

Yes, all my settings look like at your recommended site.

Only the settings of *Google font-display* [https://docs.generatepress.com/article/dynamic-typography-overview/#google-font-display] I can not find.

Thank you for the excellent support!

[Ying]

Only the settings of *Google font-display* [https://docs.generatepress.com/article/dynamic-typography-overview/#google-font-display] I can not find.

That’s because you are not using any Google fonts on your site 🙂

This thread is out of date before the dynamic typography established.
We’ve updated the documentation and had a new video to show how to host local fonts: https://docs.generatepress.com/article/adding-local-fonts/

The PHP filter you asked is no longer required.

[Author]

Posts