Set your site colors and fonts

  • colors
  • fonts
  • palette
  • typography
  • customizer
  • site-editing

Updated

To change your site's colors on a Dirigible site, set your brand colors under Appearance → Customize → Styles → Palette and click Publish. Colors and fonts are set once in the Customizer and used everywhere: pages, blocks, buttons, and forms. Start with the palette, then choose fonts.

How do I change the site colors?

  1. Go to Appearance → Customize → Styles → Palette.
  2. Set Primary, Secondary, and Accent to your brand colors.
  3. Set Text and Muted so body copy and captions are easy to read.
  4. Set Canvas, the background color for cards and panels.
  5. Adjust White, Black, Gray, Variant, Success, and Failure if needed. Success and Failure color form messages.
  6. Click Publish.

The page background color is Body Background, under Appearance → Customize → Settings → General.

How do I change the fonts?

If the font is… Follow
In the Dirigible Fonts library Choose a font from the Dirigible Fonts library
From Google Fonts or Adobe Fonts (Typekit) Using Google Fonts or Adobe Fonts

Either way, you finish in Appearance → Customize → Styles → Fonts by filling in Display Font Stack, Body Font Stack, and Alternate Font Stack.

How do I change heading and text sizes?

Once colors and fonts are in place, adjust sizes and weights under Styles → Header 1 through Header 6 and Styles → Paragraphs.

Tips

  • Open a page in the block editor after publishing. Headings and paragraphs there should match the live site.
  • Check that your Text color reads well on your Body Background, and that your logo stands out against the header. See Add your logo and set up the site header.