Skip to main content
Change text font to match your document’s style and tone. Select text and apply different fonts for headers, quotes, or emphasis. Preserves perfectly through Word import/export.

​
OOXML Structure

<w:r>
  <w:rPr>
    <w:rFonts w:ascii="Arial" w:hAnsi="Arial"/>
  </w:rPr>
  <w:t>Text in Arial font</w:t>
</w:r>

​
Use case

  • Brand consistency - Match company typography guidelines
  • Document hierarchy - Different fonts for headers vs body text
  • Code snippets - Monospace fonts for technical content
  • Readability - Choose fonts optimized for screen or print

​
Options

Configure the extension behavior:
​
types
Array<string>
default:"['textStyle']"
Mark types to add font family support to

​
Attributes

Node attributes that can be set and retrieved:
​
fontFamily
FontFamilyValue
Font family for text

​
Commands

​
setFontFamily

Set font family
Preserves other text styling attributes
Example: 
// Set to Arial
editor.commands.setFontFamily('Arial')

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    // Set to Arial
    editor.commands.setFontFamily('Arial')
  },
});
Parameters:
​
fontFamily
FontFamilyValue
required
Font family to apply

​
unsetFontFamily

Remove font family
Reverts to default document font
Example: 
editor.commands.unsetFontFamily()

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.unsetFontFamily()
  },
});

​
Types

​
FontFamilyValue

CSS font-family string (e.g., ‘Arial’, ‘Times New Roman’, ‘sans-serif’)

​
Source code