Font Style

In this example, we create a custom Font style which is used to set the fontFamily style. In addition, we create a Formatting Toolbar button which sets the Font style on the selected text.

Try it out: Highlight some text to open the Formatting Toolbar and set the Font style!

Relevant Docs:

GitHub

StackBlitz

import { BlockNoteSchema, defaultStyleSpecs } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import {
  BasicTextStyleButton,
  BlockTypeSelect,
  ColorStyleButton,
  CreateLinkButton,
  FileCaptionButton,
  FileReplaceButton,
  FormattingToolbar,
  FormattingToolbarController,
  NestBlockButton,
  TextAlignButton,
  UnnestBlockButton,
  useBlockNoteEditor,
  useComponentsContext,
  useCreateBlockNote,
} from "@blocknote/react";

import { RiText } from "react-icons/ri";

import { Font } from "./Font";

// Our schema with style specs, which contain the configs and implementations for styles
// that we want our editor to use.
const schema = BlockNoteSchema.create({
  styleSpecs: {
    // Adds all default styles.
    ...defaultStyleSpecs,
    // Adds the Font style.
    font: Font,
  },
});

// Formatting Toolbar button to set the font style.
const SetFontStyleButton = () => {
  const editor = useBlockNoteEditor<
    typeof schema.blockSchema,
    typeof schema.inlineContentSchema,
    typeof schema.styleSchema
  >();

  const Components = useComponentsContext()!;

  return (
    <Components.FormattingToolbar.Button
      label="Set Font"
      mainTooltip={"Set Font"}
      icon={<RiText />}
      onClick={() => {
        const fontName = prompt("Enter a font name") || "Comic Sans MS";

        editor.addStyles({
          font: fontName,
        });
      }}
    />
  );
};

const CustomFormattingToolbar = () => (
  <FormattingToolbar>
    <BlockTypeSelect key={"blockTypeSelect"} />

    <FileCaptionButton key={"fileCaptionButton"} />
    <FileReplaceButton key={"replaceFileButton"} />

    <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />
    <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />
    <BasicTextStyleButton
      basicTextStyle={"underline"}
      key={"underlineStyleButton"}
    />
    <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />
    {/* Adds SetFontStyleButton */}
    <SetFontStyleButton />

    <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />
    <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />
    <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />

    <ColorStyleButton key={"colorStyleButton"} />

    <NestBlockButton key={"nestBlockButton"} />
    <UnnestBlockButton key={"unnestBlockButton"} />

    <CreateLinkButton key={"createLinkButton"} />
  </FormattingToolbar>
);

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    schema,
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        type: "paragraph",
        content: [
          {
            type: "text",
            text: "Comic Sans MS",
            styles: {
              font: "Comic Sans MS",
            },
          },
          {
            type: "text",
            text: " <- This text has a different font",
            styles: {},
          },
        ],
      },
      {
        type: "paragraph",
        content:
          "Highlight some text to open the Formatting Toolbar and change the font elsewhere",
      },
      {
        type: "paragraph",
      },
    ],
  });

  return (
    <BlockNoteView editor={editor} formattingToolbar={false}>
      {/* Replaces the default Formatting Toolbar. */}
      <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />
    </BlockNoteView>
  );
}

import { BlockNoteSchema, defaultStyleSpecs } from "@blocknote/core";import "@blocknote/core/fonts/inter.css";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import {  BasicTextStyleButton,  BlockTypeSelect,  ColorStyleButton,  CreateLinkButton,  FileCaptionButton,  FileReplaceButton,  FormattingToolbar,  FormattingToolbarController,  NestBlockButton,  TextAlignButton,  UnnestBlockButton,  useBlockNoteEditor,  useComponentsContext,  useCreateBlockNote,} from "@blocknote/react";import { RiText } from "react-icons/ri";import { Font } from "./Font";// Our schema with style specs, which contain the configs and implementations for styles// that we want our editor to use.const schema = BlockNoteSchema.create({  styleSpecs: {    // Adds all default styles.    ...defaultStyleSpecs,    // Adds the Font style.    font: Font,  },});// Formatting Toolbar button to set the font style.const SetFontStyleButton = () => {  const editor = useBlockNoteEditor<    typeof schema.blockSchema,    typeof schema.inlineContentSchema,    typeof schema.styleSchema  >();  const Components = useComponentsContext()!;  return (    <Components.FormattingToolbar.Button      label="Set Font"      mainTooltip={"Set Font"}      icon={<RiText />}      onClick={() => {        const fontName = prompt("Enter a font name") || "Comic Sans MS";        editor.addStyles({          font: fontName,        });      }}    />  );};const CustomFormattingToolbar = () => (  <FormattingToolbar>    <BlockTypeSelect key={"blockTypeSelect"} />    <FileCaptionButton key={"fileCaptionButton"} />    <FileReplaceButton key={"replaceFileButton"} />    <BasicTextStyleButton basicTextStyle={"bold"} key={"boldStyleButton"} />    <BasicTextStyleButton basicTextStyle={"italic"} key={"italicStyleButton"} />    <BasicTextStyleButton      basicTextStyle={"underline"}      key={"underlineStyleButton"}    />    <BasicTextStyleButton basicTextStyle={"strike"} key={"strikeStyleButton"} />    {/* Adds SetFontStyleButton */}    <SetFontStyleButton />    <TextAlignButton textAlignment={"left"} key={"textAlignLeftButton"} />    <TextAlignButton textAlignment={"center"} key={"textAlignCenterButton"} />    <TextAlignButton textAlignment={"right"} key={"textAlignRightButton"} />    <ColorStyleButton key={"colorStyleButton"} />    <NestBlockButton key={"nestBlockButton"} />    <UnnestBlockButton key={"unnestBlockButton"} />    <CreateLinkButton key={"createLinkButton"} />  </FormattingToolbar>);export default function App() {  // Creates a new editor instance.  const editor = useCreateBlockNote({    schema,    initialContent: [      {        type: "paragraph",        content: "Welcome to this demo!",      },      {        type: "paragraph",        content: [          {            type: "text",            text: "Comic Sans MS",            styles: {              font: "Comic Sans MS",            },          },          {            type: "text",            text: " <- This text has a different font",            styles: {},          },        ],      },      {        type: "paragraph",        content:          "Highlight some text to open the Formatting Toolbar and change the font elsewhere",      },      {        type: "paragraph",      },    ],  });  return (    <BlockNoteView editor={editor} formattingToolbar={false}>      {/* Replaces the default Formatting Toolbar. */}      <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} />    </BlockNoteView>  );}

import { createReactStyleSpec } from "@blocknote/react";

// The Font style.
export const Font = createReactStyleSpec(
  {
    type: "font",
    propSchema: "string",
  },
  {
    render: (props) => (
      <span style={{ fontFamily: props.value }} ref={props.contentRef} />
    ),
  },
);

import { createReactStyleSpec } from "@blocknote/react";// The Font style.export const Font = createReactStyleSpec(  {    type: "font",    propSchema: "string",  },  {    render: (props) => (      <span style={{ fontFamily: props.value }} ref={props.contentRef} />    ),  },);

Font Style

Learn

Collaborate

Community

Legal & Theme