Uploading a Nongoogle font to GP Child theme

[angelarose]

ohh okay! so I’ve uploaded both of them: https://ibb.co/mcSMZzk What do I have to do next? DO I have to add any more code? In the php folder ofthe child theme, I added:

add_filter( ‘generate_typography_default_fonts’, function( $fonts ) {
$fonts[] = ‘Vogue Regular’;
$fonts[] = ‘East liberty signature Regular’;

return $fonts;
} );

using the code from the documentation

[Elvin]

`add_filter( ‘generate_typography_default_fonts’, function( $fonts ) {
$fonts[] = ‘Vogue Regular’;
$fonts[] = ‘East liberty signature Regular’;

return $fonts;
} );`

This is the last part. The purpose of this code is for your newly imported fonts to appear on the dropdown menu in the customizer’s typography settings.

You should be able to use Vogue now.

I’ve actually tested your site so see if font-family: 'Vogue Regular'; works and it actually does work now meaning you’ve correctly imported it. 🙂

A wise man once said:
"Have you cleared your cache?"

[angelarose]

AAH yeeees, I see it in the customizer, thank you!! When creating a page or a post how would I change the font there as I tried to change the font in the attached photo to the East Liberty Signature font but nothing happened/showed up?

https://ibb.co/J29VnY4

[Elvin]

AAH yeeees, I see it in the customizer, thank you!! When creating a page or a post how would I change the font there as I tried to change the font in the attached photo to the East Liberty Signature font but nothing happened/showed up?

Does it work on the customizer but not on the block editor? Can you check changing typography on customizer too?

Let me know what you see. Thanks.

A wise man once said:
"Have you cleared your cache?"

[angelarose]

yes it woks on the customizer but can’t get it to work on the block editor. This is the customizer: https://ibb.co/Gnc40Jy and this is it with the block editor: https://ibb.co/5kjT3F0

[Elvin]

Strange.

Can assign the font family, save it and check the live version if the font actually applies?

It seems like a GenerateBlock issue.

A wise man once said:
"Have you cleared your cache?"

[angelarose]

I added the font family here but nothing happened in the block editor or on the live version: https://ibb.co/RhTzmvb

[Elvin]

I’ve done tests on my end and found that added fonts didn’t preview live on the editor but still applies on the live site.

This one screenshot from your previous reply – https://ibb.co/5kjT3F0 is the correct way to set the font. Saving it should apply to the live site even though you’re not seeing its preview on the editor.

As for the preview not working, we may have to also load the CSS in the block editor.

You can use this as reference. https://generatepress.com/forums/topic/how-to-show-custom-fonts-in-block-editor-gutenberg/#post-1459136

A wise man once said:
"Have you cleared your cache?"

[angelarose]

Thank you so I would add:

add_action( ‘enqueue_block_editor_assets’, function() {
wp_enqueue_style( ‘your-handle’, ‘URL TO YOUR FILE’ );
} );

to the additonal css section of a specific block? Also, still slightly confused as what “your-handle” is for. DO I need to add that code for each variant of a specific font?

[Elvin]

add_action( ‘enqueue_block_editor_assets’, function() {
wp_enqueue_style( ‘your-handle’, ‘URL TO YOUR FILE’ );
} );

to the additonal css section of a specific block?

This is a PHP snippet added to your child theme’s functions.php.

… Also, still slightly confused as what “your-handle” is for. DO I need to add that code for each variant of a specific font?

No, it is added one time only. What we’re doing here is adding a stylesheet file for the block editor so it loads our locally added fonts.

Here’s an example:

add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_style(
        'editor-custom-fonts',get_stylesheet_directory_uri().'/editor-custom-fonts.css',array( 'wp-edit-blocks' ),time()
	);
} );

What this does is, it enqueues/adds a style named 'editor-custom-fonts' found in the child theme’s folder indicated by get_stylesheet_directory_uri() with the file name of editor-custom-fonts.css used in CSS.

I basically made a separate css file for use of the block editor which I named editor-custom-fonts.css and enqueued it on the Child Theme functions.php for the block editor’s use.

A wise man once said:
"Have you cleared your cache?"

[angelarose]

Thank you for that explanation, i understand it much better now! SO added it into my php: https://ibb.co/xCWW9QT , It works when in preview thank you!!

[Elvin]

Nice one! Good work.

Good to know it works for you. No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts