[Support request] how to show custom fonts in block editor gutenberg?

Home Forums Support how to show custom fonts in block editor gutenberg?

  • This topic has 6 replies, 2 voices, and was last updated 4 months ago by dasigna.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1458658
    dasigna

    hi there,

    being aware this must have been has been asked before, but there seems no way to get it working … already tried several ways.

    setup:
    custom local font (incl. variants) added to website in dedicated folder of child theme, enqueued via css and functions.php.
    working like a charme on frontend and within customizer / gp.
    so i would assume everything is set up right πŸ™‚

    so as we are planning to use gutenberg for editing blog posts it would be quite nice if the local fonts would show up there too – sadly they dont. always getting fallback ‘times new roman’.

    tried several ways to get it done via snipplets i found here (and others there) – nothing seems to work.

    is there something that has been changed according to that recently and theres probably a ‘new’ way to do so?
    (btw. … if wp can pick up these fonts in customizer, why not in gutenberg??? weird!)

    any hint highly appreciated and thanks for that in advance.

    #1459136
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You need to load the @font-face CSS in the block editor. Is the CSS currently in your child theme stylesheet? If so, we can load that in the block editor, but it will bring in your other CSS as well.

    Alternatively, you can just add the font-face stuff into the editor:

    add_action( 'enqueue_block_editor_assets', function() {
        wp_enqueue_style( 'your-handle', 'URL TO YOUR FILE' );
    } );
    #1460044
    dasigna

    hi tom,

    currently css is in child, yes – fonts also, within dedicated ‘fonts’ folder.
    loading this complete css may not be that great, as there are many other things to be contained.

    so i assume “just add the font-face stuff” into the editor means, to set up a separate css file just for that?
    a second question for the understanding of the dumb of us – the ‘your-handle’-part should be picked up from a specific area or may it be just whatever?

    tried that separate stuff before without success :/ but worth another try anyways.

    thanks for your help.

    #1460224
    Tom
    Lead Developer
    Lead Developer

    Yea, that’s what I would do. Create a new .css file with the @font-face definitions, and make sure the URLs to the font files are correct. Then add the URL to that new CSS file to the function I provided above.

    your-handle can be anything you like as long as it’s unique, it’s just an identifier that WordPress uses for enqueued files.

    #1461943
    dasigna

    … finally works.

    strangely it does not work with relative url within function… weird.

    thanks.

    #1462549
    Tom
    Lead Developer
    Lead Developer

    That’s strange – relative URLs should work if they’re inside a CSS file and the fonts are relative to that file.

    Glad you got it working πŸ™‚

    #1462608
    dasigna

    … relative url in css is o.k.

    but not in php sniplet.

    thanks anyway πŸ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.