[Resolved] Adding Local Fonts to GP

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

[Tom]

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?

[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? 🙂

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

[Tom]

Glad you got it working! 🙂

[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

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

[Tom]

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

[Michael]

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

[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;
} );

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

[Tom]

Hi Michael,

culpable nailed it – if you change the name in those two locations it will work 🙂

[Michael]

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

[Tom]

Awesome, glad you got it working 🙂

[Author]

Posts