- This topic has 26 replies, 3 voices, and was last updated 3 years, 6 months ago by Elvin.
-
AuthorPosts
-
September 27, 2020 at 5:08 pm #1461517angelarose
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
September 27, 2020 at 5:23 pm #1461523ElvinStaffCustomer Support`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. 🙂September 27, 2020 at 5:34 pm #1461528angelaroseAAH 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?
September 27, 2020 at 6:02 pm #1461538ElvinStaffCustomer SupportAAH 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.
September 27, 2020 at 6:14 pm #1461542angelaroseyes 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
September 27, 2020 at 6:57 pm #1461563ElvinStaffCustomer SupportStrange.
Can assign the font family, save it and check the live version if the font actually applies?
It seems like a GenerateBlock issue.
September 28, 2020 at 7:26 am #1462218angelaroseI added the font family here but nothing happened in the block editor or on the live version: https://ibb.co/RhTzmvb
September 28, 2020 at 1:09 pm #1462816ElvinStaffCustomer SupportI’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
September 29, 2020 at 7:30 am #1463783angelaroseThank 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?
September 29, 2020 at 1:19 pm #1464406ElvinStaffCustomer Supportadd_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 byget_stylesheet_directory_uri()
with the file name ofeditor-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 Themefunctions.php
for the block editor’s use.September 29, 2020 at 6:20 pm #1464574angelaroseThank 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!!
September 29, 2020 at 6:27 pm #1464576ElvinStaffCustomer SupportNice one! Good work.
Good to know it works for you. No problem. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.