[Resolved] Local installation – fonts not showing in Gutenberg

[Matthias]

Hi there,

i want to create a local website only – no fonts, icons, images etc. loaded from google or other places.

Like already mentioned in a few topics here i also face the problem of not beeing able to see the local installed font in Gutenberg.
In the customizer i can see it fine.

I use a child thema and added the fonts to the style.css according to the documentation

Now i tried to follow the instructions from another topic:
1. I added

 /* Load local fonts from block-editor.css in Gutenberg */
add_action( 'enqueue_block_editor_assets', function () {
    wp_enqueue_style( 'custom-css', get_theme_file_uri( '/block-editor.css' ), false );
} );

to the functions.php of the child theme and the font info from the style.css also to the block-editor.css.
But this doesnt change anything in Gutenberg -> in the drowdown for fonts in advanved Typhgraphy a lot is shown – but not the fonts i added to the child theme.
I am using a wordpress installation on a virtual machine, with ubuntu 20.04 lts (guess thats where the fonts in the dropdown are from as one font is called ubuntu).
Did i miss something?

[David]

Hi there,

WP 5.9 changed quite a bit when it comes to adding styles in the editor.
One method is to use GP’s generate_editor_styles filter hook:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'your-editor-style.css';

    return $editor_styles;
} );

This assumes your-editor-style.css is in the root of your child theme folder.

[Matthias]

that doesnt seem to work.

1.I have the font files in generatepress-child/fonts
2.i added the code you posted above in functions.php of the child – i changed the your-editor-style to block-editor.
3.i have a block-editor.css with the content:

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('https://mydomain.com/wp-content/themes/generatepress_child/fonts/nunito-sans-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://mydomain.com/wp-content/themes/generatepress_child/fonts/nunito-sans-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://mydomain.com/wp-content/themes/generatepress_child/fonts/nunito-sans-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://mydomain.com/wp-content/themes/generatepress_child/fonts/nunito-sans-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://mydomain.com/wp-content/themes/generatepress_child/fonts/nunito-sans-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://mydomain.com/wp-content/themes/generatepress_child/fonts/nunito-sans-v11-latin-regular.svg#NunitoSans') format('svg'); /* Legacy iOS */
}

But Gutenberg still shows the dropdown list and not the fonts available in the childtheme/fonts folder..

[David]

None of that will make the fonts appear in the drop down list.
Which Blocks are you wanting to select a specific font on ? If its a GenerateBlocks Headline for example, you can simply type in the local font family name, and DO NOT select the Google font toggle.
If setup correctly then you should see your headline using the local font in the editor.

[Matthias]

A ok – that works – i was trying on GB Headline – which i use for most (even as normal paragraph)
Is there a way to disable the dropdown/google fonts entirely? I want to use local fonts, images, icons etc. only anyways.

[David]

Theres no way to disable the font list drop down at this time. it may be a future option.

I would recommend you use the GB fonts option sparingly. Where possible set your fonts in the GP Customizer and let GB inherit them. That way you can make global changes easily.

Whereas in GB if you set fonts inside the posts then you would have to manually update them all in the future… unless you’re using GB Pro global styles.

[Author]

Posts