Archived topic

Adding Local Fonts to GP

13 replies · Started by culpable on January 27, 2020

Viewing posts 1–14 of 14

January 27, 2020 at 2:56 pm #1146215

Hiya,

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

I've:

Read the article on adding local fonts (https://docs.generatepress.com/article/adding-local-fonts/)
Added the fonts to my Generetepress Child theme (https://imgur.com/LNxE21u), which is the currently set active theme (https://imgur.com/xojK454)
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:

Add the font to the customizer
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!

January 27, 2020 at 7:28 pm #1146370

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?

January 27, 2020 at 8:33 pm #1146412

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? :)

January 27, 2020 at 8:42 pm #1146419

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!

January 28, 2020 at 10:23 am #1147361

Glad you got it working! :)

January 29, 2020 at 2:59 am #1147955

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

January 29, 2020 at 3:44 am #1148001

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?

January 29, 2020 at 9:08 am #1148406

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

January 29, 2020 at 9:23 am #1148428

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

January 29, 2020 at 9:29 am #1148430

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

January 29, 2020 at 2:44 pm #1148684

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

January 29, 2020 at 4:09 pm #1148719

Hi Michael,

culpable nailed it - if you change the name in those two locations it will work :)

January 30, 2020 at 3:56 am #1149125

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

January 30, 2020 at 9:03 am #1149551

Awesome, glad you got it working :)

This archived topic is closed to new replies.

Start building better websites today.