[Resolved] Uploading a Nongoogle font to GP Child theme

Home Forums Support Uploading a Nongoogle font to GP Child theme

  • This topic has 26 replies, 3 voices, and was last updated 5 months ago by Elvin.
Viewing 12 posts - 16 through 27 (of 27 total)
  • Author
    Posts
  • #1461517
    angelarose

    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

    #1461523
    Elvin
    Staff
    Customer 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. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1461528
    angelarose

    AAH 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?

    https://ibb.co/J29VnY4

    #1461538
    Elvin
    Staff
    Customer Support

    AAH 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.

    A wise man once said:
    "Have you cleared your cache?"

    #1461542
    angelarose

    yes 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

    #1461563
    Elvin
    Staff
    Customer Support

    Strange.

    Can assign the font family, save it and check the live version if the font actually applies?

    It seems like a GenerateBlock issue.

    A wise man once said:
    "Have you cleared your cache?"

    #1462218
    angelarose

    I added the font family here but nothing happened in the block editor or on the live version: https://ibb.co/RhTzmvb

    #1462816
    Elvin
    Staff
    Customer Support

    I’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

    A wise man once said:
    "Have you cleared your cache?"

    #1463783
    angelarose

    Thank 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?

    #1464406
    Elvin
    Staff
    Customer Support
    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?

    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 by get_stylesheet_directory_uri() with the file name of editor-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 Theme functions.php for the block editor’s use.

    A wise man once said:
    "Have you cleared your cache?"

    #1464574
    angelarose

    Thank 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!!

    #1464576
    Elvin
    Staff
    Customer Support

    Nice one! Good work.

    Good to know it works for you. No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 12 posts - 16 through 27 (of 27 total)
  • You must be logged in to reply to this topic.