[Resolved] Hosting Fonts Locally

Home Forums Support Hosting Fonts Locally

  • This topic has 8 replies, 3 voices, and was last updated 2 months ago by Andres.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1377159
    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

    #1377192
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1377221
    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

    #1377580
    David
    Staff
    Customer Support

    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.

    #1378287
    Andres

    Hello David,

    Thank for for confirming.

    Have a good day!

    Andrés

    #1378850
    David
    Staff
    Customer Support
    #1379156
    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

    #1379232
    David
    Staff
    Customer Support

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

    #1379386
    Andres

    You are welcome, David.

    Have a good one.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.