Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Adding local fonts – some issues

  • Hi there,
    I followed this tutorial:
    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:

    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.


  • 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!

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

  • 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;
    } );
  • 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.


  • 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 🙂

  • Hi,
    1 – see screenshot here:
    2 – see screenshot here:

    Unfortunately I cannot give you admin login because I am developing locally.

  • fernandoazarcon2

    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?

  • 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

    Try this:

    add_filter( 'generate_font_manager_show_google_fonts', '__return_false' );

Viewing 10 posts - 1 through 10 (of 19 total)
  • You must be logged in to reply to this topic.