Question 165123 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can local fonts be added to WordPress Create-Block plugin?

I am trying to complete the https://developer.wordpress.org/block-editor/handbook/tutorials/create-block/block-code/ tutorial.

I did what they say but the font only works on the backend. I didn’t add any wp-enqueues, just the code mentioned there. I tried with a second font – just in case – but the result is the same.
The frontend gives a 404 as the style is added in the page inlined. That is:

    <style id='create-block-gutenpride-style-inline-css'>
        @font-face {
            font-family: Gilbert;
            src: url(fonts/gilbert-color.02d3d364.otf);
            font-weight: bold
        }

        @font-face {
            font-family: AmaticSC;
            src: url(fonts/AmaticSC-Regular.caaf513a.ttf)
        }

        .wp-block-create-block-gutenpride {
            font-family: AmaticSC;
            font-size: 64px
        }
    </style>

I tried using both fonts and they produce the same error. The files exist on the generated fonts folder but the src is a 404: http://gutenberg-dev.local/fonts/AmaticSC-Regular.caaf513a.ttf

Everything is working properly on the block editor as the CSS file is enqueued and the relative URLs work.

Have you found a solution for this?
How can we make it work?

Tags:

2

Answers


  1. 0

    Im not sure how this is supposed to be done, but try an absolute path to the file.

    If the path to your file is https://mywebsite.com/wp-content/plugins/my-plugin/gilbert-color.otf then try adding this to the /src/style.scss file in your plugin:

    @font-face {
    font-family: Gilbert;
    src: url(https://mywebsite/wp-content/plugins/my-plugin/gilbert-color.otf);
    font-weight: bold;
}
.my-namespace-my-block {
    font-family: Gilbert;
    font-size: 64px;
}

    Then run

    npm run build

    Reload the post and refresh the browser and check the published page.

    This works for me, though I may be missing something. The tutorial is pretty vague. https://developer.wordpress.org/block-editor/getting-started/create-block/block-code/

    Login or Signup to reply.
  2. 0

    Another approach is using a font from a CDN like google fonts. Import it to the front and backend. Not exactly what the tutorial suggests, but it saved me a load of time trying to do something the tutorial isn’t about.

    add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'rubik-font', 'https://fonts.googleapis.com/css2?family=Rubik+Beastly&display=swap' );
});

add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_style( 'rubik-font', 'https://fonts.googleapis.com/css2?family=Rubik+Beastly&display=swap' );
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search