[Resolved] Adding Local Fonts to GP

Home Forums Support Adding Local Fonts to GP

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1146215
    culpable

    Hiya,

    I’m trying to add a local font to GP.

    I’ve:

    1. Read the article on adding local fonts (https://docs.generatepress.com/article/adding-local-fonts/)
    2. Added the fonts to my Generetepress Child theme (https://imgur.com/LNxE21u), which is the currently set active theme (https://imgur.com/xojK454)
    3. Disabled my caching plugins

    My current CSS is added via the Simple CSS plugin:

    @font-face {
        font-family:"sailec";
        font-style: normal;
        font-weight:700;
        src: local('sailec'),
        url("/wp-content/themes/generatepress_child/fonts/Sailec-Bold.woff2") format("woff2"),
        url("/wp-content/themes/generatepress_child/fonts/Sailec-Bold.woff") format("woff");
    }
    @font-face {
        font-family:"sailec";
        font-style: normal;
        font-weight:400;
        src: local('sailec'),
        url("/wp-content/themes/generatepress_child/fonts/Sailec-regular.woff2") format("woff2"),
        url("/wp-content/themes/generatepress_child/fonts/Sailec-regular.woff") format("woff");
    }

    I believe it is working, as when I right-click inspect and change the font to “sailec”, it changes the font on the page. What I can’t seem to do is get the font to load via the “Typography” in the Customize section of the WP editor.

    This is my current functions.php file:

    // Avoids loading empty style.css file
    add_action( 'wp_enqueue_scripts', function() {
        wp_dequeue_style( 'generate-child' );
    }, 50 );
    
    function generatepress_child_enqueue_scripts() {
    	if ( is_rtl() ) {
    		wp_enqueue_style( 'generatepress-rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
    	}
    }
    add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );
    
    // Add Sailec Font to GeneratePress Default Font list
    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'sailec';
        return $fonts;
    } );
    

    Could you please help me to:

    1. Add the font to the customizer
    2. Stop my styles.css child theme file from loading (https://imgur.com/bLrV73o) – I thought the code added to my functions.php file would remove it as per this guide (note that I’m adding my styles via simple.css)

    Thank you very much for your help!

    #1146370
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Just to confirm, you should be using your full URL instead of starting with: /wp-content/

    Your function to add the font to the Customizer looks good. Are you sure it’s not at the bottom of the “System fonts” category?

    Your function to remove the child theme CSS is correct as well. Can you make sure all caches are completely cleared?

    #1146412
    culpable

    Thanks for your reply Tom!

    I actually wasn’t using the full URL, and the relative URL still seemed to be working as defined by being able to download the font at the URL and via being able to change the font in the inspector.

    Either way, I’ve changed all instances to the full URL and it hasn’t seemed to fix the issue.

    I’ve disabled all plugins except for GP Premium and Simple CSS. I’ve run:
    sudo killall -HUP mDNSResponder && echo macOS DNS Cache Reset to clear the cache on my mac,

    I can still change the font via Dev tools, but the generate press child stylesheet is still loading, and the font still doesn’t seem to be showing. I’ve tried searching + scrolling through the list manually (including the bottom of the ‘System Fonts’ category).

    Any ideas? πŸ™‚

    #1146419
    culpable

    So it turns out that I’m a goofy goober and had uploaded the wrong functions.php file… oh dear. How embarrassing.

    Sorry for wasting your time Tom. As soon I uploaded the correct functions.php, it all worked beautifully. Right at the bottom of the β€œSystem fonts” category, as you predicted πŸ™‚

    Thank you for your help!

    #1147361
    Tom
    Lead Developer
    Lead Developer

    Glad you got it working! πŸ™‚

    #1147955
    Michael

    I’ve just gone through the process to add Local Fonts to the site, and it works! Woohoo! Rather I should say, I’m more surprised about my ability to get it to work πŸ˜‰ I’m a serious hit and miss hacker. Anyway, my speed page insight result has gone back up to 93! Stoked πŸ™‚

    Now I just have to work out how to do the same for AwesomeFont for my social media share icons/links since it slows things down a lot it seems

    #1148001
    Michael

    For some reason, after I select Open Sans in System Fonts then publish and close the customizer, when I reopen the customizer the body font is jumping back to the Open Sans in Google Fonts.

    Should I remove the Open Sans from the Google Fonts selection to prevent this?

    #1148406
    Tom
    Lead Developer
    Lead Developer

    You can do that, or just name your custom Open Sans font something else: Open Sans Local

    #1148428
    Michael

    Thanks Tom – I will give that a shot (renaming the font)

    #1148430
    Michael

    Hi Tom, could you please tell me what the code is to correctly update the names for the customizer typography control? I added Open Sans and Carrois Gothic via the code on the adding-local-fonts page – can I update the names for these? Or delete them with another code snippet, then redo the code snippet on the addding-local-fonts page?

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'Open Sans';
        $fonts[] = 'Carrois Gothic';
    
        return $fonts;
    } );
    #1148684
    culpable

    Hey Michael,

    I’m not Tom but I think you need to change the name to Open Sans Local in your code snippet, as well as in your css in the font-family: section. (i.e. font-family: Open Sans Local).

    #1148719
    Tom
    Lead Developer
    Lead Developer

    Hi Michael,

    culpable nailed it – if you change the name in those two locations it will work πŸ™‚

    #1149125
    Michael

    Thanks guys. I just removed the Google Fonts entirely and kept the System Fonts with Open Sans and Carrois Gothic.

    #1149551
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad you got it working πŸ™‚

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