Font Family twice in editor dropdown

radicle
1

Hello

In theme.json I added some fonts:

"typography": {

      "defaultFontSizes": false,
"customFontSize": false,

"dropCap": true,
"fontFamilies": [
        {
"slug": "sans",
"name": "DIN Next",
"fontFamily": "'DIN Next', Arial, sans-serif"
        },

        {

"slug": "serif",
"name": "Neue Swift",
"fontFamily": "'Neue Swift', serif"
        },
        {
"slug": "mono",
"name": "Mono",
"fontFamily": "Menlo, monospace"

        }
      ]
    }

After running successfully npm run build the font families appear all twice in the dropdown in the Gutenberg editor.

gutenbgerg-fonts
gutenbgerg-fonts550Ă—868 20.7 KB

Any idea why this is happening? If I remove the contents of fontFamilies the font selection disappears, so there is no other source. I also tried to manually edit the generated theme.json in public/build/assets by changing the name. Then both font names reflect this change.

Thanks for any help on this.

2

Some more information.

I commented out lines 81- 93 in app/Providers/AssetsServiceProvider.php

Then de placate font entries went away.

It looks like the JSON is loaded twice maybe?

3

Can you try using app.css to configure your fonts?

See Setting Up Custom Fonts in Sage | Sage Docs | Roots

4

This does not work, as the fonts are then not registered at all so they are available in the editor.

In app/Providers/AssetsServiceProvider.php (line 69) you already rewrite theme_file_path so that every time WordPress looks up theme.json it reads the compiled file from public/build/assets/theme.json.

The block commented out (wp_theme_json_data_default at app/Providers/AssetsServiceProvider.php (line 81)) was telling WordPress to treat that same compiled file as the core “default” theme JSON. Then the load order became:

  1. Replace WordPress’s own defaults with the theme’s data

  2. Load the theme (which, because of the theme_file_path filter, is the same file again).

This wipes out the normal core defaults and forces the theme data to be merged twice.

1 Like
5

Even with that code in app/Providers/AssetsServiceProvider.php it works for me when following the Sage guide

You also need to update editor.css similar to your app.css changes with importing the fonts CSS and updating the @theme layer

6

Pushed a PR to include webfonts out of the box, see https://github.com/roots/radicle/pull/289

7

I think what you’re saying about the wp_theme_json_data_default filter is right, I’ll dig into that more some later

1 Like