[Resolved] issue installing fonts locally

[t29k75]

Hi,

I followed documentation and tried what I could, but can’t get it to work.
New fonts are visible in Customizer, but after selecting Montserrat for body, it displays some other font. When I use inspector, it says Montserrat, even thou it is showing different one and shows error “Failed to load resource: the server responded with a status of 404”. I did clear cache, refresh, etc. I must be missing something silly:)

I added to style.css

/* catamaran-regular – latin */
@font-face {
font-family: ‘Catamaran’;
font-style: normal;
font-weight: 400;
font-display: swap; /* or block, auto, fallback, optional */
src: local(‘Catamaran Regular’), local(‘Catamaran Regular’),
url(‘https://surf-atlantic.com/public_html/wp-content/themes/generatepress_child/fonts/catamaran-v8-latin-regular.woff2’) format(‘woff2’),
url(‘https://surf-atlantic.com/public_html/wp-content/themes/generatepress_child/fonts/catamaran-v8-latin-regular.woff’) format(‘woff’);
}
/* catamaran-700 – latin */
@font-face {
font-family: ‘Catamaran’;
font-style: normal;
font-weight: 700;
font-display: swap; /* or block, auto, fallback, optional */
src: local(‘Catamaran Bold’), local(‘Catamaran Bold’),
url(‘https://surf-atlantic.com/public_html/wp-content/themes/generatepress_child/fonts/catamaran-v8-latin-700.woff2’) format(‘woff2’),
url(‘https://surf-atlantic.com/public_html/wp-content/themes/generatepress_child/fonts/catamaran-v8-latin-700.woff’) format(‘woff’);
}
/* montserrat-regular – latin */
@font-face {
font-family: ‘Montserrat’;
font-style: normal;
font-weight: 400;
font-display: swap; /* or block, auto, fallback, optional */
src: local(‘Montserrat Regular’), local(‘Montserrat Regular’),
url(‘https://surf-atlantic.com/public_html/wp-content/themes/generatepress_child/fonts/montserrat-v15-latin-regular.woff2’) format(‘woff2’),
url(‘https://surf-atlantic.com/public_html/wp-content/themes/generatepress_child/fonts/montserrat-v15-latin-regular.woff’) format(‘woff’);
}

functions.php

/* Add Local Font to Gutenberg */

add_action( ‘after_setup_theme’, function() {
add_theme_support( ‘editor-styles’ );
add_editor_style( trailingslashit( get_stylesheet_directory_uri() ) . ‘editor-style.css’ );
} );

add_action( ‘enqueue_block_editor_assets’, function () {
wp_enqueue_style( ‘custom-css’, get_theme_file_uri( ‘/editor-style.css’ ), false );
} );

/* Add Local Font to Customizer */

add_filter( ‘generate_typography_default_fonts’, function( $fonts ) {
$fonts[] = ‘Catamaran’;
$fonts[] = ‘Montserrat’;

return $fonts;
} );

/* Remove Google Fonts from Customiser */

add_action( ‘wp_enqueue_scripts’, function() {
wp_dequeue_style( ‘generate-fonts’ );
} );

add_action( ‘admin_init’, function() {
add_filter( ‘generate_google_fonts_array’, ‘__return_empty_array’ );
} );

Made new folder editor-style.css in GP child theme and copied css from above.
And made new folder fonts in GP child theme and added font files.

What am I missing? Could you have a look and help me, please?
thanks,

Tibor

[Elvin]

Hi there,

Looking at your @font-face, it looks like your URL for font files are wrong.

You should remove the /public_html on the URL.

[t29k75]

Hi Elvin,

thanks for getting back to me.

I adjusted URL’s as suggested and it did help.
I can change fonts in Customiser now, but after saving it there, I have to clear/flush cache and refresh Customiser to see the change there and on live site.

Does it make any difference if font folder/files are located in ???
a) wp-content/themes/generatepress_child/
b) just in public_html
c) in media library, as explained in GP doc (https://docs.generatepress.com/article/adding-local-fonts/)

As well, in backend and in Preview using Gutenberg and GBP, new font doesn’t show, even if I type it in Typography>Show Adv.Typgraphy>FotFamily>Catamaran or Montserrat.

thanks,
Tibor

[Elvin]

I adjusted URL’s as suggested and it did help.
I can change fonts in Customiser now, but after saving it there, I have to clear/flush cache and refresh Customiser to see the change there and on live site.

That makes sense. You should always clear your cache when you make any changes. That’s good practice because you’re sure the cached version being served is the latest styling you intended.

Does it make any difference if font folder/files are located in ???
a) wp-content/themes/generatepress_child/
b) just in public_html
c) in media library, as explained in GP doc (https://docs.generatepress.com/article/adding-local-fonts/)

It won’t matter as long as the path to the font file is correct. Although, I find it good practice if you create a font folder in your child theme’s directory and get the path of the files from there.

As well, in backend and in Preview using Gutenberg and GBP, new font doesn’t show, even if I type it in Typography>Show Adv.Typgraphy>FotFamily>Catamaran or Montserrat.

That means this snippet you have isn’t working:

/* Add Local Font to Gutenberg */

add_action( ‘after_setup_theme’, function() {
add_theme_support( ‘editor-styles’ );
add_editor_style( trailingslashit( get_stylesheet_directory_uri() ) . ‘editor-style.css’ );
} );

add_action( ‘enqueue_block_editor_assets’, function () {
wp_enqueue_style( ‘custom-css’, get_theme_file_uri( ‘/editor-style.css’ ), false );
} );

You should add the @font-face imports on your child theme’s editor-style.css or just change the editor-style.css with the css file that has your @font-face imports so the fonts also work on the back end.

[t29k75]

Ok, getting there:)

Regarding “last non-working snippet”…
You lost me a bit there. You said “You should add the @font-face imports on your child theme’s editor-style.css…”
I believe I do have all 3 imports as well in …/public_html/wp-content/themes/generatepress_child/editor-style.css folder (if that is what you meant)
please see screenshot: https://ibb.co/jJdGGCs

As well there are two warnings, shall I ignore them or there need to be some changes on those lines?
“unknown-property:font-display”
“@font-face declaration doesn’t follow the fontspring bulletproof syntax”

Tibor

[Elvin]

That font display flag can be ignored.

For the other one:

On all your codes, Can you try replacing all ‘ and ’ with '? Codes return syntax errors when using curly apostrophes. Make sure you always use the straight one. 🙂

Let us know how it goes.

[t29k75]

I swapped apostrophes for straight ones, but still the same.

In my previous post I still can’t followed your suggestion reg. the snippet:

/* Add Local Font to Gutenberg */

add_action( ‘after_setup_theme’, function() {
add_theme_support( ‘editor-styles’ );
add_editor_style( trailingslashit( get_stylesheet_directory_uri() ) . ‘editor-style.css’ );
} );

add_action( ‘enqueue_block_editor_assets’, function () {
wp_enqueue_style( ‘custom-css’, get_theme_file_uri( ‘/editor-style.css’ ), false );
} );

Do I need both parts? and what do I need to add and where?

I searched and I believe these are similar posts (https://generatepress.com/forums/topic/locally-added-fonts-not-loading-in-block-editor/, https://generatepress.com/forums/topic/how-to-show-custom-fonts-in-block-editor-gutenberg/#post-1459136). Tried, but not fully getting it to work.

thanks,
T

[Elvin]

Yes that’s the topic.

These PHP snippets are the main ones responsible for loading the fonts on the back end.

The generate_typography_default_fonts filter is for the customizer.

This is for Gutenberg editor.

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

If it doesn’t work, there must be something incorrect about the enqueued style.

Any chance you could let us check the backend? You can provide the site details on the private information text field.

[t29k75]

Elvin,

finally, it is working now!
I corrected “Gutenberg snippet” and added “handle” and URL. As well, “editor-styles.css was missing letter “s”.
All looks great now.
Thanks for your help and patience.

Tibor

[Elvin]

Nice one. Glad you got it to work. No problem. 🙂

[Author]

Posts