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.
Fernando
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
Fernando
May 24, 2023 at 1:30 am

Try this:

add_filter( 'generate_font_manager_show_google_fonts', '__return_false' );
OliverS
May 24, 2023 at 4:10 am

Yes, great that worked for the customizer but not in the block editor > typography. If there is also a solution that would be great but if not, don’t worry.

And do you have an explanation about issue #1?

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

Thanks so much
Fernando
May 24, 2023 at 4:28 pm
Are you referring to the Block Settings Typography of GenerateBlocks?

If so try adding this snippet:
```
remove_action( 'wp_enqueue_scripts', 'generateblocks_do_google_fonts' );
remove_action( 'enqueue_block_editor_assets', 'generateblocks_do_google_fonts' );
```
Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

—-

About issue #1, You can try accessing your wp-config.php file through FTP then add define(‘ALLOW_UNFILTERED_UPLOADS’, true); inside the file.

A simple solution is to NOT bother with the .ttf and just use .woff and .woff2 as they are supported by all modern browsers.

—-

Using Additional CSS should be fine.
OliverS
May 25, 2023 at 12:18 am

Hi Fernando,
thank you for your help but unfortunately the code snippet you gave me does not do its job. I inserted the two lines via the codes snippets plugin but when I go to the block editor > typography and choose a font from the drop down list under Font Family the toggle “use google font api” still appears to toggle on / off i.e. Roboto font or any other google font.

Thanks

Oliver

Fernando

May 25, 2023 at 3:45 am

Try this instead:

add_action( 'wp', function() {
  remove_action( 'wp_enqueue_scripts', 'generateblocks_do_google_fonts' );
remove_action( 'enqueue_block_editor_assets', 'generateblocks_do_google_fonts' );
} );

OliverS
May 25, 2023 at 7:56 am

Hi, still not working. The aim should be not to show any google font under Font Family and remove the use google font api toggle button. Instead I’d like to see only default fonts like Arial and my own downloaded local fonts. Until now I see still a lot google fonts and can use the google font api toggle button.

If you have no idea anymore then I can wait until my site goes online and let you in.

Thx
Fernando
May 25, 2023 at 4:03 pm

To clarify, are you currently referring to the GB Block Setting Google fonts? Can you share a screenshot to be sure?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Viewing 16 posts - 1 through 16 (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