Fonts

React Editor uses the Outfit font family by default. Load the font in your host application; core does not inject an external font stylesheet.

Load a font

Use your framework’s font loader, a <link> element, or @font-face in the host application. For example:

@font-face {
  font-family: "Acme Sans";
  src: url("/fonts/acme-sans.woff2") format("woff2");
  font-display: swap;
}

Changing the font family

Set Chakra font tokens through the Editor’s themeConfig prop:

import { defineConfig } from "@chakra-ui/react";
 
const editorTheme = defineConfig({
  theme: {
    tokens: {
      fonts: {
        body: { value: '"Acme Sans", sans-serif' },
        heading: { value: '"Acme Sans", sans-serif' },
      },
    },
  },
});
 
export function PageEditor() {
  return <Editor themeConfig={editorTheme} config={config} data={data} />;
}

The preview renders your page separately, so load and apply page fonts in your application styles as usual.

Overview Plugins