Using Google Fonts or Adobe Fonts

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

Updated

Adding a Google Font or Adobe Font to WordPress takes two steps: load the font provider's stylesheet on every page, then tell your theme to use that font by name. Your theme's font settings, or a font plugin, decide where each step happens. The steps below are for a Dirigible site.

On Dirigible, use Google Fonts or Adobe Fonts when the typeface you want isn't in the Dirigible Fonts library. If it is in the library, see Choose a font from the Dirigible Fonts library instead. Those fonts load from your own site and are faster on repeat visits.

Paste the font provider's link under Scripts & Embeds → Embed Fonts, then type the font's name into Styles → Fonts.

How do I add a Google Font?

  1. On Google Fonts, choose a family and select only the weights you need.
  2. Copy the stylesheet URL. It 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 font name, followed by a fallback, into Display Font Stack, Body Font Stack, and/or Alternate Font Stack. For example: Jost, sans-serif.
  7. Click Publish.

Every extra weight in the Google URL adds download time to every page, so include only the ones you use.

How do I add an Adobe Font (Typekit)?

  1. In Adobe Fonts, create or open a web project and add the family.
  2. Copy the embed code Adobe gives you. It looks like <link rel="stylesheet" href="https://use.typekit.net/….css">.
  3. Go to Appearance → Customize → Scripts & Embeds → Embed Fonts.
  4. Paste the whole tag into Generic Font Embed.
  5. Open Styles → Fonts.
  6. Type the font name exactly as Adobe lists it for your web project, plus a fallback, into Display Font Stack, Body Font Stack, and/or Alternate Font Stack.
  7. Click Publish.

Which field controls what

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

Hard-refresh the live site and the block editor to see the new font in both.

Tips

  • Pasting the embed alone doesn't change any text. The font only shows up once you name it in Styles → Fonts.
  • Use one method per font. Loading the same family through both Optimized Font URL and Generic Font Embed downloads it twice.
  • For the color palette, see Set your site colors and fonts.