[Support request] Define a font for paragraph block via Customiser – Typography

[Faris]

Hello team,

I followed Leo’s tutorial on how to add a local font and it worked nicely as usual. Just wondering, how I define a specific font (target element) via “Customiser – Typography” for the “Paragraph block”?

[David]

Hi there,

by default the paragraph block will receive the typography styles of the body element.
are you wanting to style a specific paragraph or all of them ?

[Faris]

All of them. I just figured out that this is only happening at the editing mode but when I publish the page it is working fine, so my excuse for the inconvenience. However, if there is a way to inherit the font style into the Gutenberg editing mode, please let me know? Otherwise it is not a big deal at all 🙂

[Fernando]

Hi there,

To do as such, you can try adding a PHP snippet like this:

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

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

Hope this helps!

[Faris]

Thank you Fernando! What about the next snippet code I already have, do I need to combine it with yours?

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'styles.css';

    return $editor_styles;
} );

Source

[David]

So are you setting the Typography > Body style ? And that is not correct in the editor?

[Faris]

Yes, exactly!

[David]

And you have this snippet:

https://generatepress.com/forums/topic/define-a-font-for-paragraph-block-via-customiser-typography/#post-2237723

Which would load styles from your child theme styles.css – do you have any conflicting styles in there ?

[Faris]

No conflict. (I added only the first one), I am just wondering how to get the wysiwyg experience in the editor including the font “I have chosen in the Customiser – Typography”. Should I add second code snippet to the first one, mix theme, use only one or what exactly? 🙂

First one:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'styles.css';

    return $editor_styles;
} );

Second:

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

[David]

Where did you add the @font-face CSS for your local font?

If its in the Customizer > Additional CSS then you need the second snippet,

[Faris]

In style.css file.

/* 4- Adding (roboto-300 - latin) Font */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('https://domain.com/wp-content/uploads/2022/05/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://domain.com/wp-content/uploads/2022/05/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://domain.com/wp-content/uploads/2022/05/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://domain.com/wp-content/uploads/2022/05/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('https://domain.com/wp-content/uploads/2022/05/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://domain.com/wp-content/uploads/2022/05/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

[David]

Then you need this:

add_filter( 'generate_editor_styles', function( $editor_styles ) {
    $editor_styles[] = 'style.css'; // Make sure this is name of your child theme style sheet

    return $editor_styles;
} );

[Faris]

As always, a wonderful support team. Worked like a charm! Thanks David, thanks Fernando!

[David]

Glad we could be of help!

[Author]

Posts