Change of --gjs-main-fon has no effect

[dohomi]

Hi Guys

I would like to simply change the main font to only one font ( I don't allow changing fonts ). The font should be my system font "Inter"

:root{
    --gjs-main-font: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

Even this rule is applied I still see the font-family of 'Times'. What am I missing here?

Additionally I also tried to change the fontProperty:

   const StyleManager = editor.StyleManager
          const fontProperty = StyleManager.getProperty("typography", "font-family")
          if (fontProperty) {
            fontProperty.set("default", "Inter, sans-serif")
            StyleManager.render()
          }

I found many issues of changing the options of font-family but none of the solutions were helping me out yet.

[artf]

Hi @dohomi CSS variables like --gjs-main-font have nothing to do with what you see in the canvas, those variables are only for updating the editor UI itself.

If you need some default global CSS rule in your pages, I'd suggest using the protectedCss option.

grapesjs.init({
      // ...
      protectedCss: `
        * { box-sizing: border-box; }
        body {
          margin: 0;
          font-family: Comic Sans MS, cursive, sans-serif;
        }
      `,
});

If you also need to update the style manager property, you can do this:

// Update options...
editor.StyleManager.getProperty('typography', 'font-family')?.setOptions([ 
  { id: 'Inter, sans-serif', label: 'Inter' } 
]);

// ...or remove it
editor.StyleManager.removeProperty('typography', 'font-family');

[dohomi]

awesome thanks for your reply 👍