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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andres]

Hello David,

Thank for for confirming.

Have a good day!

Andrés

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andres]

You are welcome, David.

Have a good one.

[Author]

Posts