Topic: Adding custom fonts to the block editor

dysonant
May 10, 2023 at 5:10 am
Hi,

I would like to add a custom font to the block editor and having some trouble. This screen shot to shows where specifically I want to add the fonts:

I tried implementing the following recommended code as a php snippet in this manner:
```
wp_add_inline_style( 'wp-block-library', 

'
@font-face {
    font-family: 'DIN Pro';
    src: url('https://nyms.love/wp-content/themes/nyms/fonts/DINPro-Light.woff2') format('woff2'),
        url('https://nyms.love/wp-content/themes/nyms/fonts/DINPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

'
);
```
Though this is throwing a fatal error.

I also tried the other provided suggestion, from the forum post linked above, to add all the CSS, which did not work either. I would really appreciate some help with this. Thanks.
David
May 10, 2023 at 5:43 am

Hi there,

when you added the @font-face CSS to your site. Where did you add it ?
As we can simply tell the editor to load that too.

And then you just need to type the name of the font into the Font Family Field.

Let me know
dysonant
May 10, 2023 at 9:18 am
I am using Simple CSS (https://wordpress.com/plugins/simple-css). Additionally, to add code I am using Code Snippets (https://wordpress.org/plugins/code-snippets/) to add custom PHP or HTML. I find this is a more convenient way to add customization without editing the theme or creating a child theme.

I added the original default @font-face CSS with Simple CSS. I am not entirely certain what the path to that CSS is.

BTW, I was successful in adding the font to the Generate Press “Customize” interface. To accomplish that I simply used
```
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'DIN Pro';
	$fonts[] = 'DIN Pro Cond';

    return $fonts;
} );
```
My PHP skills are truly awful, so I am not ceratin if this helps, I only know it works.
Ying
May 10, 2023 at 10:42 am

BTW, I was successful in adding the font to the Generate Press “Customize” interface. To accomplish that I simply used

You do not need PHP code to add fonts to GP’s typography system. As the PHP code works, I assume you are still using the legacy typography system, if you want, you can switch to the dynamic one:
https://docs.generatepress.com/article/switching-to-dynamic-typography/
dysonant
May 10, 2023 at 4:05 pm

Great, thanks. This does not answer my question about how to add to the block editor section.
Fernando
May 10, 2023 at 5:02 pm

Hi Dysonant,

Unfortunately, there’s no filter to add custom fonts for GB Typography settings.

The one for GP’s typography dropdown should be something like this: https://generatepress.com/forums/topic/remove-google-fonts-2/page/2/#post-2286572
dysonant
June 15, 2023 at 1:02 pm

Hello @ying. Your comment has been sitting in the back of my mind for weeks. Can you elaborate? I am not using the legacy typography system, and I am most definitely using the dynamic typography system. That said, I am curious what you were trying to convey to me? Did you say this because you use the dynamic system to add a self-hosted font that is not a part of the google fonts library?

The documentation on this page is what other GP people point to, but you mention is a legacy way of doing things.

https://docs.generatepress.com/article/adding-local-fonts/#using-font-face
Ying
June 15, 2023 at 2:01 pm

Did you say this because you use the dynamic system to add a self-hosted font that is not a part of the google fonts library?

Sorry, I misunderstood your question, I thought you were talking about GP’s typography.

If you are talking about GB’s typography dropdown list, there isn’t such a filter currently, unforutnaly.
dysonant
June 15, 2023 at 4:23 pm

I am talking about both. When I originally opened this request, I was talking about GB. But then your response caught my interest. So I would still like an answer to my most recen question.
Ying
June 16, 2023 at 8:30 am
1. If the font is a Google font, you can directly add it into the font manager in the customizer, if it’s locally installed, do NOT activate the Google API, so the theme will load your locally installed fonts.

2. If the font is NOT a Google font, you can still add the font name to the customizer by directly entering the font name to the Font family name field.

3. I’m not sure about the path to Simple CSS as well, if you can add the @font-face CSS to customizer >additional CSS, you can use this PHP code snippet instead to make the block editor load the local fonts:
```
add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );
```
But this doesn’t mean you can select the font from GB’s typography, it just to show the text in the local fonts if it’s assigned in the customizer so you can have a better idea of the end result. Hope that makes sense 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Adding custom fonts to the block editor