Using Google or Adobe fonts

  • fonts
  • google-fonts
  • adobe-fonts
  • typekit
  • customizer
  • site-editing

Use this path when the typeface is not in the Dirigible Fonts library. Prefer Choosing a Dirigible font when the family is already in the catalog — self-hosted fonts load faster on repeat visits.

Loading has two parts: paste the provider embed under Scripts & Embeds → Embed Fonts, then type the CSS font-family into Styles → Fonts.

Google Fonts

  1. On Google Fonts, choose a family and the weights you need.
  2. Copy the CSS2 stylesheet URL (it usually starts with https://fonts.googleapis.com/css2?family=…).
  3. In WordPress, go to Appearance → Customize → Scripts & Embeds → Embed Fonts.
  4. Paste the URL into Optimized Font URL.
  5. Open Styles → Fonts.
  6. Type the family into Display Font Stack, Body Font Stack, and/or Alternate Font Stack, with a fallback — for example, Jost, sans-serif.
  7. Click Publish.

Include only the weights you use in the Google URL. Extra weights slow every page.

Adobe Fonts (Typekit)

  1. In Adobe Fonts, create or open a web project and add the family.
  2. Copy the kit stylesheet embed Adobe gives you — typically a <link rel="stylesheet" href="https://use.typekit.net/….css"> tag.
  3. Go to Appearance → Customize → Scripts & Embeds → Embed Fonts.
  4. Paste the full tag into Generic Font Embed (use this when an optimized URL is not available).
  5. Open Styles → Fonts.
  6. Type the Adobe font-family name into Display Font Stack, Body Font Stack, and/or Alternate Font Stack, plus a fallback.
  7. Click Publish.

The theme prints Generic Font Embed markup in the document head. Confirm the family name matches what Adobe documents for that kit.

After you embed

Field Role
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

Hard-refresh the front end and the block editor so the new face appears in both.

Tips

  • Prefer one method per typeface — filling both Optimized Font URL and Generic Font Embed for the same family can load it twice.
  • Hosted fonts still need stack assignment; embeds alone do not change headings or body copy.
  • For palette setup, see Choosing colors and fonts.