- This topic has 16 replies, 7 voices, and was last updated 1 year, 9 months ago by Ying.
-
AuthorPosts
-
January 21, 2021 at 1:27 pm #1628454Angus
Hi, I have gone through your process of adding a font locally. It’s working fine in the customizer and front end, but they fall back to a system font when using the block editor. I’ve looked up this issue on the forum here but all the solutions are for a child theme, and I don’t use a child theme. This is the code I have in a snippet
add_filter( 'generate_typography_default_fonts', function( $fonts ) { $fonts[] = 'beyond_infinity-webfont'; return $fonts; } );
and this is the CSS I have in the Additional CSS section of the customizer
@font-face { font-family: 'beyond_infinity-webfont'; src: url('URL/wp-content/uploads/2020/09/beyond_infinity-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal; }
Is there a way of having the font work in the block editor? Thanks
January 21, 2021 at 5:03 pm #1628619ElvinStaffCustomer SupportHi there,
You’ve probably read Tom’s reply here already:
https://generatepress.com/forums/topic/how-to-show-custom-fonts-in-block-editor-gutenberg/#post-1459136You don’t necessarily have to create a child theme but you must create a .css file with the
@font-face{...}
to enqueue to the block editor’s assets.You can upload your .css file with the
@font-face{}
on the site through FTP and use this PHP snippet:add_action( 'enqueue_block_editor_assets', function() { wp_enqueue_style( 'your-handle', 'URL TO YOUR FILE' ); } );
Change the
your-handle
to your preferred handle and change theURL TO YOUR FILE
to the path pointing to your uploaded css file with the @font-face{}.While you can simply edit
block-editor.css
found ingeneratepress\assets\css\admin
to add your@font-face{}
, we don’t recommend doing this because any changes your make on the default theme files will be wiped if/when the theme updates. This is the reason why child theme is recommended.January 22, 2021 at 9:00 am #1629540AngusThanks for that Elvin. Worked like a charm! π
January 24, 2021 at 6:44 pm #1632024ElvinStaffCustomer SupportNice one. Glad you got it to work. No problem. π
July 5, 2021 at 5:20 pm #1845824hichbHi,
I’m testing out the method you suggested without success.
There must be something I’m missing in your tutorial.
This is the path to the CSS file: https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/custom-fonts.cssAnd this is the snipped I added:
add_action( 'enqueue_block_editor_assets', function() { wp_enqueue_style( 'adding-custom-fonts-to-generateblocks-editor', 'https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/custom-fonts.css' ); } );
And this is the page in question: https://wordpress-273320-2007441.cloudwaysapps.com/new-page
It should load the Didot Font as the live site here: https://thefashionglobe.com/
Thanks in advance!
July 5, 2021 at 6:26 pm #1845847ElvinStaffCustomer SupportHi Hich,
The block is actually attempting to load it but the value is wrong. See this. https://share.getcloudapp.com/BluK27JJ
The text swap means the fonts actually load on the site. The only issue left is the incorrect value of the css property.
Can you share the PHP snippet you’ve added for it to appear on the dropdown? Let us know.
July 6, 2021 at 2:48 am #1846142hichbHi Elvin,
Thanks a lot for taking a look. I’ve already shared the snippet added as well as the CSS path above.
I’m not sure what I’m doing wrong..July 6, 2021 at 8:30 am #1846705hichbSorry, I’m really stuck with this…Can someone help me??
July 6, 2021 at 11:55 am #1846914YingStaffCustomer SupportIt’s answered in your new topic π
May 3, 2022 at 5:28 am #2207493PxProdHello everyone.
This works at first glance, but when I use the responsive previews (through Generateblocks?) the fonts won’t load.
I tried to define them via admin_enqueue_scripts too and get the same problem.Any ideas?
May 3, 2022 at 5:45 am #2207517DavidStaffCustomer SupportHi there,
you need to use this filter for the WP previews to get the styles:
add_filter( 'block_editor_settings_all', function( $editor_settings ) { $css = 'p { padding-bottom: 3px; }'; $editor_settings['styles'][] = array( 'css' => $css ); return $editor_settings; } );
NOTE: No need to use the class
.editor-styles-wrapper
orbody
or other editor prefixes as they will be added by core automatically.Heres an example using that filter to load the Customizer > Additional CSS:
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; } );
Or if you like you can use the GeneratePress filter that works as above.
add_filter( 'generate_editor_styles', function( $editor_styles ) { $editor_styles[] = 'your-editor-style.css'; return $editor_styles; } );
May 3, 2022 at 6:12 am #2207549PxProdHey David,
thank you very much. Work’s like a charm π
May 3, 2022 at 6:24 am #2207562DavidStaffCustomer SupportGlad to hear that!
June 3, 2022 at 8:36 am #2242629bjbowenDoes this mean that we need to set the fonts in the style.css sheet as well as in the customizer? With fonts set only in the Customizer, but not specified in the style.css sheet, I couldn’t get my headings to show. (Locally hosted fonts.)
June 3, 2022 at 8:38 am #2242631bjbowenOr maybe “editor-styles.css” is different from my child theme css. I can’t find the answer to that.
-
AuthorPosts
- You must be logged in to reply to this topic.