Archived topic
GP / Manually adding / Custom web font
8 replies · Started by Jan on October 24, 2021
Hi David,
I was wondering if adding a local font (as suggested here) is indeed the best way to go. This article suggests the use of web fonts over local ones. What is your general take regarding web fonts?
I added a web font to my child theme using the following steps:
1) PHP added to the function.php:
// Add La Belle Aurore Custom Font
function add_google_fonts() {
wp_register_style( 'googleFonts', 'https://fonts.googleapis.com/css2?family=La+Belle+Aurore');
wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'add_google_fonts' );
?>2) CSS added to the styles.css:
h5 {
font-family: 'La+Belle+Aurore', serif;
}3) Cleared browser and server cache.
The font is still not showing up in the Customizer (see screenshot).
What am I missing?
Any advice is much appreciated.
Hi there,
in the current version of GP you simply need to add the Google Font to the Customizer using the function provided here:
Theres no other code required, it will show the font in the typography options and it will generate the font request for you. ie. you won't need your add_google_fonts function or any CSS.
If you want to host the webfont locally then this document explains how:
https://docs.generatepress.com/article/adding-local-fonts/
Or plugins like PerfMatters ( Paid plugin ) can do it automatically for you.
Advantages of locally hosting fonts can improve performance by removing additional DNS lookups and requests to 3rd party servers eg. fonts.google.
Many thanks, David. This works very well.
Glad to hear that!
As a note - GP 3.1 ( and GPP 2.1 ) will be getting a new Typography ( and Colors ) module:
https://generatepress.com/generatepress-3-1-global-colors-dynamic-typography/
This will allow you to search for or manually type in any Google Font name without using the PHP to add it to the Customizer.
In a later update we'll be looking at auto adding local fonts :)
Hi David,
wow, this sounds promising.
Thanks for pointing this out.
Regards,
Jan
You're welcome - we're hoping to go to live release this week - fingers crossed !!!
Hello!
I want to add two google fonts locally and I think I've done something wrong.
I followed your guide here.
Now after updating I also used the new typography manager to define the local fonts.
But the fonts don't show on all devices and they need a lot of time to load.
I always clear the cache before loading the site.
The site is still in development and therefore password secured.
Please help me in any way!
Angie.
Hi Angie,
Can you open a new topic?
Please attach all the code you used for adding the local fonts in the new topic.
And please link us to your site and point us to where we should be looking at.
Let me know :)
Just added a new topic! https://generatepress.com/forums/topic/local-fonts-not-on-all-devices/#new-post
Thank you!
