FlourivateHelp Center

Set your page fonts, colors and animations

Last reviewed October 21, 2026

Use your brand fonts and colors on a page, fine-tune one heading, and add gentle motion.

Set your fonts and colors once per page, then adjust single elements only where you need to. A consistent look reads as calm and professional.

Before you start

  • Time: 10 minutes per page.
  • You'll need: your brand fonts and color codes (like #2F5D50). See Brand your workspace.
  • Good to know: these settings apply to the page you have open, not your whole website. Do your home page first, then repeat on the others, or copy a finished page (see Find and manage your websites and pages).

Step 1: Set the page fonts and colors

  1. In the builder, open the Typography panel (the T button in the top bar, or ⋯ > Typography).
  2. Choose a Headline Font (used by all headings) and a Content Font (body text, lists, labels and buttons).
  3. Set Text Color and Link Color.
  4. To use a font you own, click the font box, scroll to the bottom and choose Upload Fonts.

A font or color set directly on one block always wins over these page defaults.

If Typography won't open

Use ⋯ > All Page Settings > Style instead. Its Typography section has Body Font, Heading Font and Base Font Size, and the same tab sets the page Background Color and Page Background Image.

Step 2: Fine-tune one piece of text

  1. Click the text on the page.
  2. On General, set its Text Role: Headline for the main heading, Sub Headline for section headings, Text for paragraphs. Pick the role that matches what the text is, not how big you want it. Search engines read this structure.
  3. Under Typography, adjust Font size, Font Weight, Line Height, Text Transform (for example all capitals) and Letter Spacing. Available weights depend on the font.
  4. Under Color, set the text Color and Link Text Color.

Step 3: Color a section's background

  1. Click the section.
  2. On General, under Background, keep Background Mode on Color and click the color box.
  3. Pick from Global Custom Colors (your brand colors), Default Colors, or add one with + Custom Color.
  4. Optional: turn on Gradient for a blend, or Background Blur for a frosted look over an image.

Keep enough contrast that text is easy to read, especially on phones outdoors.

Step 4: Add animation (sparingly)

  1. Click a section or block and open the Animations tab.
  2. On Animate, pick an Entrance Animation: Fade, Slide, Bounce or Flip / Zoom, each with directions. None removes it.
  3. Optional: under Hover Effects, turn on Scale on Hover, Lift on Hover or Glow on Hover. These suit cards and buttons.
  4. On Interactions, Hover State has quick presets (Lift, Grow, Glow, Shadow Depth and more) and Transition Speed from Instant to Slower.

Leave Link Settings on the Interactions tab alone unless you want the element to become a link.

Less is more

Animate one or two key sections, like your hero and your call to action. When everything moves, nothing stands out, and some visitors find motion uncomfortable.

Check it worked

  • Headings and body text use your fonts on the page and in tablet and mobile view.
  • After you publish, open the live page in a private window. Animations play as you scroll.

If something's off

  • One block ignores your page font: it has its own font set. Click it and change Typography Type back to the page font.
  • A font weight is missing: that font doesn't come in that weight. Pick another weight or font.
  • A change appeared on every page: the section is linked. See Reuse sections across pages.
  • The live page shows the old fonts: see My live page doesn't match the editor.

Related