Topic: Adding local fonts – some issues

OliverS
May 23, 2023 at 7:18 am

Hi there,
I followed this tutorial: https://docs.generatepress.com/article/adding-local-fonts/
Due to developing on a local machine I uploaded the different fonts files in the WP-media library by using the php-function in the tutorial.
1. issue: this function does not upload “ttf”-files. I get an error message like this:

nunito-v25-latin-regular.ttf
Sorry, you are not allowed to upload this file type.

(w/ the others I had no problem to upload)

Further I used the simple css plugin to change use @font-face and integrate the css-code for the google fonts I wanted. Everything worked fine till here (unless the 1st issue above).

Then I wanted to show the local fonts in the block editor by adding the first CSS-Code of the section “Show local fonts in WP block editor” in the additional CSS of the WP-Customizer – but it did not work. I am sorry, but something I did not understand here, which brings us to the 2nd issue:

2. Issue: Where and how I have to put this CSS-code below so that I can use / see the local fonts in the block editor?

add_filter( ‘block_editor_settings_all’, function( $editor_settings ) {
$css = wp_get_custom_css_post()->post_content;
$editor_settings[‘styles’][] = array( ‘css’ => $css );

return $editor_settings;
} );

Last question: if I want to make changes to CSS should I rather use your plugin Simple CSS or should I use the customizer > additional css?

Thank your for your help.

Cheers
Oliver
Ying
May 23, 2023 at 10:12 am

Hi there,

Where and how I have to put this CSS-code below so that I can use / see the local fonts in the block editor?

The snippet you are using is adding the CSS from customizer > additional CSS. So move your @font-face CSS from simple CSS to additional CSS 🙂

Let me know if this helps!
OliverS
May 23, 2023 at 10:24 am

Hi Ying,

I put the css-code from the plugin Simple CSS into the customizer’s additional css like this (see below). But it is not working.

/* montserrat-900 – latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: ‘Montserrat’;
font-style: normal;
font-weight: 900;
src: url(‘http://analyticsite-test.local/wp-content/uploads/2023/05/montserrat-v25-latin-900.eot’); /* IE9 Compat Modes */
src: url(‘http://analyticsite-test.local/wp-content/uploads/2023/05/montserrat-v25-latin-900.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘http://analyticsite-test.local/wp-content/uploads/2023/05/montserrat-v25-latin-900.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘http://analyticsite-test.local/wp-content/uploads/2023/05/montserrat-v25-latin-900.woff’) format(‘woff’), /* Modern Browsers */
url(‘http://analyticsite-test.local/wp-content/uploads/2023/05/montserrat-v25-latin-900.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://analyticsite-test.local/wp-content/uploads/2023/05/montserrat-v25-latin-900.svg#Montserrat’) format(‘svg’); /* Legacy iOS */
}

add_filter( ‘block_editor_settings_all’, function( $editor_settings ) {
$css = wp_get_custom_css_post()->post_content;
$editor_settings[‘styles’][] = array( ‘css’ => $css );

return $editor_settings;
} );
Ying
May 23, 2023 at 10:44 am
Only add the @font-face CSS code to the additional CSS field.

The below code is PHP, it needs to be added via a plugin like Code Snippet or to the functions.php file of your child theme if you are using one.
```
add_filter( 'block_editor_settings_all', function( $editor_settings ) {
$css = wp_get_custom_css_post()->post_content;
$editor_settings['styles'][] = array( 'css' => $css );

return $editor_settings;
} );
```
OliverS
May 23, 2023 at 11:04 am

Hi, I did as you said but still I see other fonts in the block editor than in the WP-preview Mode.
Sorry for that.

Greetings
Ying
May 23, 2023 at 11:40 am

1. How did you add the PHP code?
2. Is the corret @font-face in customizer > additional CSS?

Can you provide admin login to your site so we can help take a look at the backend?

Let me know 🙂
OliverS
May 23, 2023 at 12:26 pm

Hi,
1 – see screenshot here: https://postimg.cc/hX4KgP6Q
2 – see screenshot here: https://postimg.cc/bDk7kK4j

Unfortunately I cannot give you admin login because I am developing locally.
fernandoazarcon2
May 23, 2023 at 4:32 pm

Hi OliverS,

It would be hard for us to assess the issue without seeing the site live.

Can you try replacing Montserrat in your @font-face rules and type that manually as the Font Family in Appearance > Customize > Typography? Does it work?
OliverS
May 24, 2023 at 12:58 am

Hi Fernando, no it does not work. Anyway, I can live with that until I get my site online and I can come back to this issue then.

But I also mentioned other issue in my first post further up. What’s about them?

And I tried to get rid off google fonts completely by using this php-code:

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’ );
} );

But it has no effect. In appearence > customizer > typography I can still toggle on/off the google api fonts.

Thanks for your help.

Cheers Oliver
fernandoazarcon2
May 24, 2023 at 1:30 am

Try this:

add_filter( 'generate_font_manager_show_google_fonts', '__return_false' );

Viewing 10 posts - 1 through 10 (of 19 total)

1 2 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Adding local fonts – some issues