🚀 BlockNote AI is here! Access the early preview.
Examples
Theming
Changing Editor Font

Changing Editor Font

In this example, we override some of the default editor CSS to change font within the editor.

Relevant Docs:

import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
 
import "./styles.css";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        type: "paragraph",
        content: "You'll see that the font has been changed to Comic Sans MS",
      },
      {
        type: "paragraph",
      },
    ],
  });
 
  // Renders the editor instance using a React component.
  // Adds `data-changing-font-demo` to restrict styles to only this demo.
  return <BlockNoteView editor={editor} data-changing-font-demo />;
}