Archived topic

Custom fonts added but not loading in block editor

3 replies · Started by hichb on July 6, 2021

Viewing posts 1–4 of 4

July 6, 2021 at 9:38 am #1846783

Hi,
I’m testing out the method you suggested here: https://generatepress.com/forums/topic/locally-added-fonts-not-loading-in-block-editor/
but the font is still not loading.
Your colleague Elvin told me that the only issue left is the incorrect value of the css property.
But I couldn't find any error in the syntax..

This is the path to the CSS file: https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/custom-fonts.css

And 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 6, 2021 at 11:08 am #1846872

Hi Hich,

When you enter the font name in GB, could you try 'Didot 96B Italic' instead of Didot 96B Italic?
https://www.screencast.com/t/M6hmQzsqyTo

Let me know :)

July 6, 2021 at 11:12 am #1846880

Woooooooooooow! Amazing:) You've nailed it!! Congrats..
I could have spent another day trying...
So shall I always insert 'Custom Font Name'?

July 6, 2021 at 11:33 am #1846901

You can either use this format 'Custom Font Name' or update your @font-face CSS file to this:

/* Didot 96B Italic*/
@font-face {
  font-family: 'Didot 96B Italic';
  font-style: normal;
  font-weight: 400;
  src: url('https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/fonts/Didot-BoldIta96.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/fonts/Didot-BoldIta96.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/fonts/Didot-BoldIta96.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/fonts/Didot-BoldIta96.woff') format('woff'), /* Modern Browsers */
       url('https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/fonts/Didot-BoldIta96.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/fonts/Didot-BoldIta96.svg#GFSDidot') format('svg'); /* Legacy iOS */
}

As you can see I added src: local(''),into your original file, so that you won't need to insert '' every time using the font :)

This archived topic is closed to new replies.

Start building better websites today.