Choose a font from the Dirigible Fonts library

  • fonts
  • typography
  • dirigible-fonts
  • customizer
  • site-editing

Updated

To change your site's fonts on a Dirigible site, click Add to Site on a font in the Fonts screen, then paste its stack into Appearance → Customize → Styles → Fonts. The Dirigible Fonts library is a catalog of typefaces that load from your own site instead of an outside service, such as Google's servers. If the font you want isn't in the library, see Using Google Fonts or Adobe Fonts.

Add a font to your site

  1. In the WordPress admin, open Fonts (the top-level menu item with the paragraph icon).
  2. Use Search fonts... or the filters (All, Sans Serif, Serif, Mono, Display, Handwriting) to find a font.
  3. Optionally change Preview Size and Preview Text in the sidebar to try your own sample text.
  4. Click Add to Site on the font you want.
  5. The font moves to Active Fonts at the top. Copy the Stack value on its card, for example Inter, sans-serif.

Changes save automatically. Fonts marked Requires License need a license from the font's maker before you use them on a live site.

Choose weights and width (optional)

On an Active Fonts card:

  • Turn off the weights and styles (normal, italic, bold, and so on) you don't need. Fewer weights means faster pages.
  • Some fonts show a weight range instead of separate switches.
  • If a font supports different widths, choose Full axis or One value, then set the slider. Reset puts it back to the default.

Adding a font doesn't change any text on its own. Your headings and body text switch over once you complete the next step.

Use the font on your site

  1. Go to Appearance → Customize → Styles → Fonts.
  2. Paste the Stack into the matching field:
Field Used for
Display Font Stack Large headings (H1–H3), hero titles
Body Font Stack Paragraphs, buttons, navigation, forms
Alternate Font Stack Smaller headings (H4–H6), tags, accent links
  1. Click Publish.

The stack ends with a fallback like sans-serif or serif, which shows if the font can't load. Keep it when you paste.

Font loading settings

Under Appearance → Customize → Settings → General:

  • Leave Font Preload on so active fonts show sooner when a page first loads.
  • Turn on Load Italic Early only if italic text visibly pops in late.

Tips

  • Remove Font stops loading the font but doesn't clear it from Styles → Fonts. Update those fields if they still name the removed font.
  • Open a page in the block editor after publishing. Headings and paragraphs should match the live site.
  • For the color palette, see Set your site colors and fonts.