Skip to main content

Change Font in Confluence: Custom Google Fonts Step-by-Step

· 18 min read
NGPilot
NGPilot
NGPilot

Confluence ships with a fixed set of system fonts that work for general documentation. But if your company has brand guidelines specifying particular typefaces, or your team wants documentation that looks polished and distinct from every other Confluence site, the default typography is not enough. Custom fonts transform a generic-looking wiki into a branded internal product that team members immediately recognize.

Google Fonts for Confluence gives you access to over 1,798 Google Fonts directly inside your Confluence pages. You can customize font family, weight, size, color, and alignment with a live preview that shows exactly how your text will look before you save. This step-by-step tutorial walks through everything: installing the app, configuring fonts, applying them across spaces, and maintaining a consistent typographic system that respects accessibility and brand standards.

Why custom fonts matter in Confluence​

Before diving into the how-to, it helps to understand the practical reasons teams invest time in custom Confluence typography:

  • Brand consistency. If your company uses specific fonts in marketing materials, presentations, and product interfaces, extending those same typefaces into Confluence creates a unified experience. Employees consuming internal documentation feel the same brand presence they see externally.
  • Readability. Not all fonts are equal for on-screen reading. A well-chosen body font reduces eye strain during long documentation sessions. Heading fonts with strong visual weight make page structure instantly scannable.
  • Professionalism. Client-facing Confluence spaces (for agencies, consultancies, and B2B companies) benefit enormously from custom typography. When a client logs into your Confluence instance and sees polished, branded documentation, it reinforces credibility.
  • Accessibility. Certain fonts are specifically designed for readability, including for users with dyslexia or low vision. Choosing accessible fonts is not just a nice-to-have — for many organizations, it is a compliance requirement.

Confluence does not provide native support for custom fonts on individual pages. The Google Fonts for Confluence app fills this gap by embedding a macro-based font engine directly into the Confluence editor.

Prerequisites​

Before starting, make sure you have the following:

  • A Confluence Cloud site (the app is designed for Cloud instances)
  • Edit permissions on at least one Confluence space
  • Admin or app-installation permissions if you are the one installing the app (otherwise, ask your Confluence administrator)
  • A rough idea of which fonts you want to use — or at least a willingness to browse and experiment

Step-by-step: Add custom fonts to Confluence​

Step 1: Install Google Fonts for Confluence​

The app is available on the Atlassian Marketplace. Installation takes under a minute.

  1. Go to Confluence Settings by clicking the gear icon in the top-right corner of your Confluence site.
  2. In the left sidebar, navigate to Apps and then click Find new apps.
  3. In the search bar, type "Google Fonts for Confluence".
  4. When the app appears in the results, click Get app (or Install).
  5. Follow the installation prompts. For Cloud instances, this is typically a single click confirming the installation.

Once installed, the app is available on every page in your Confluence instance. There is no per-space installation — it works globally from the moment it is added.

Verification: Open any Confluence page in edit mode. Type /google fonts in the editor slash-command menu. If you see Google Fonts for Confluence appear as an option, the installation was successful.

Step 2: Configure your font settings​

This is where the actual typography work happens. The Google Fonts macro opens a configuration panel with multiple options and a live preview area.

  1. Edit any Confluence page.
  2. Type /google fonts in the editor and select Google Fonts for Confluence from the slash-command menu.
  3. The configuration panel opens. You will see the following options:

Font Family: A searchable dropdown containing all 1,798+ Google Fonts. Start typing a font name to filter the list. If you know the exact font you want (for example, "Inter" or "Playfair Display"), just type its name. If you are browsing, scroll through the list and click fonts to preview them.

Font Variant: Choose from the available variants for the selected font. The options typically include:

VariantDescription
RegularDefault weight (400) for body text
ItalicItalic style for emphasis
BoldBold weight (700) for headings and strong emphasis
Bold ItalicCombined bold and italic for maximum emphasis

Available variants depend on the selected font. Some fonts like "Roboto" offer many weights (100 through 900 plus italics), while display fonts may only have regular and bold.

Text Size: Enter any font size in pixels. There is no enforced limit. Common ranges include:

UsageRecommended Size
Body text14–18px
Subheadings20–28px
Page headings32–48px
Display / hero text60–120px

Text Color: Use the built-in color picker to select a text color. Quick-select swatches provide common colors, and the full palette lets you fine-tune the exact shade by adjusting RGB values.

Text Alignment: Choose from left, center, or right alignment for your styled text block.

Preview Text: Type your actual content in the preview area to see how it renders with the selected font, size, color, and alignment — all in real time before you commit.

  1. Once you are satisfied with the preview, click Save to insert the styled text block into your page.

Step 3: Apply fonts across your Confluence pages​

After configuring your first styled text block, the next step is applying consistent typography across your pages. The Google Fonts macro works per text block — it is not a global or space-level font setting. Consistency comes from using the same font choices on each macro instance across your pages. This is where planning matters more than tooling.

Start with a reference page. Create a page in your space called "Typography Style Guide" (or similar). Use the Google Fonts macro to create examples of each font, size, and color your team should use. This becomes the single source of truth for typography in your space.

Apply fonts systematically. Work through your most important pages first:

  1. Space home page — This is the first thing visitors see. Use your heading font for the space title and key section headings.
  2. Navigation pages — Parent pages that link to child content. Consistent typography here sets expectations for the rest of the space.
  3. High-traffic pages — Pages your team references daily (runbooks, SOPs, dashboards). These benefit most from polished typography.
  4. Client-facing pages — If clients access your Confluence instance, prioritize these for brand-compliant fonts.

Applying fonts per space vs across the entire site. Because the macro is per-text-block, you choose how broadly to apply consistency:

  • Per space means you use different font choices in different spaces. Each space can have its own typographic identity. This gives you maximum flexibility, which is ideal when different teams or departments have distinct brand guidelines.
  • Across the entire site means using the same fonts consistently on every page in every space. To achieve this, you establish a shared style guide and apply it uniformly via the macro on each page. This is the right approach when your entire organization follows one brand identity.

For most organizations, a hybrid approach works best: one primary font pairing used across the site, with individual spaces allowed to customize for their specific audience. For example, the engineering team might use a monospace-friendly font pairing while the marketing team uses a serif pairing that aligns with external brand materials.

Step 4: Preview and test across themes​

Before rolling out custom fonts to your entire team, test them thoroughly. The Google Fonts macro supports both light and dark mode in Confluence, and your text needs to be readable in both.

Dark mode testing checklist:

  • Open your styled pages in Confluence's dark theme. Verify that text colors have sufficient contrast against the dark background.
  • A color that looks great on a white background (light gray, for instance) may be nearly invisible in dark mode.
  • The macro automatically adapts to the active theme, but custom text colors you select in the color picker need manual verification.

Accessibility testing:

  • Check color contrast ratios. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold). Use a contrast checker tool to verify your text and background combinations.
  • Test with screen magnification. Some decorative fonts become illegible when zoomed.
  • Verify that your font size is at least 14px for body text. Smaller sizes may be difficult to read, especially on high-DPI displays where rendering differs.

Cross-browser testing:

  • Open your pages in Chrome, Firefox, Safari, and Edge. Google Fonts render consistently across modern browsers, but it is worth checking.
  • If team members use the Confluence mobile app, test on iOS and Android as well. Font rendering on mobile can differ slightly from desktop.

Step 5: Publish and maintain​

After testing, publish your pages and establish a system for maintaining typographic consistency.

Create a font style guide page. Document the following:

  • Which fonts to use (heading font, body font, accent font)
  • Specific sizes for each usage (H1, H2, body text, captions, callouts)
  • Approved text colors with hex values
  • Which font variants are allowed (for example: "Use Inter Regular and Bold only. Do not use Light or Black weights.")
  • Examples of correctly styled content

Train your team. Show colleagues how to use the /google fonts slash command. A 5-minute walkthrough during a team meeting is usually sufficient. Point them to the style guide page.

Re-editing existing styled text. If you need to change a font on an existing block, click on the Google Fonts macro and select Edit. The configuration panel reopens with all your previous settings preserved. Make your changes, preview, and save.

Periodic review. Every few months, review your font usage across the space. Look for drift — pages where someone used a different font or size than the standard. Gently correct these and point the author to the style guide.

Font pairing recommendations​

Choosing fonts is one of the most impactful decisions you will make. The right pairing creates visual hierarchy, improves readability, and reinforces your brand. Here are six recommended pairings with use cases:

Heading FontBody FontBest ForMood
Playfair DisplaySource Sans 3Marketing, brand guidelines, client proposalsElegant, editorial
MontserratMerriweatherLong-form documentation, knowledge basesProfessional, readable
PoppinsLatoModern tech companies, startups, product docsClean, contemporary
OswaldOpen SansInternal dashboards, status reports, operationsBold, utilitarian
Roboto SlabRobotoEngineering docs, technical specificationsStructured, technical
DM Serif DisplayDM SansExecutive summaries, board presentations, formal reportsSophisticated, polished

How to choose the right pairing​

Consider your audience. Internal engineering documentation needs clarity and density — fonts like Roboto and Roboto Slab prioritize legibility at small sizes. Client-facing materials benefit from character and polish — Playfair Display paired with Source Sans 3 creates an editorial feel that communicates quality.

Limit to two fonts maximum. A heading font and a body font is the standard recipe. Adding a third font for accents or callouts is acceptable, but going beyond three creates visual noise. The contrast between your two main fonts should be noticeable but not jarring. Pair a serif with a sans-serif, or a bold display font with a neutral body font.

Test at actual sizes. A font that looks beautiful at 48px may fall apart at 14px. Use the live preview in the Google Fonts macro to test each font at the exact sizes you plan to use on your pages. Preview with real content — your actual headings and body text — not just the default placeholder text.

Applying fonts per space vs across the entire site​

The Google Fonts for Confluence macro is a per-text-block tool — each macro instance styles one block of text on one page. There is no global toggle or admin setting that enforces fonts across a space or the entire site. Understanding this helps you make practical decisions about how to roll out custom typography.

When to use different fonts per space​

  • Multiple brands under one organization. A holding company with distinct subsidiary brands needs different typography in each subsidiary's Confluence space.
  • Departmental autonomy. Engineering, design, marketing, and legal teams often have different documentation cultures. Letting each choose fonts that work for their content improves adoption.
  • Client-specific spaces. Agencies and consultancies that give clients access to Confluence can customize each client's space to match the client's brand rather than the agency's.
  • Experimental projects. A new initiative may want a distinct visual identity before deciding whether to adopt it organization-wide.

When to use consistent fonts across the entire site​

  • Strong single brand. If your company has one brand identity and all documentation should reflect it, site-wide consistency is the goal.
  • Compliance requirements. Some regulated industries require uniform documentation standards. Site-level enforcement ensures no space deviates.
  • Simplified maintenance. One style guide, one set of font choices, one set of approved colors. When the brand updates, you update one reference page instead of hunting through every space.

The practical approach​

Because the macro is per-text-block, consistency comes from process, not from a global setting. The recommended approach:

  1. Create a master typography style guide page at the site level.
  2. Link to it from every space's home page.
  3. Include copy-paste-ready examples using the Google Fonts macro so team members can see exactly what each styled text block should look like.
  4. Periodically audit spaces for compliance with the style guide.

This process-based approach is actually more flexible than a rigid site-wide setting, because it allows controlled exceptions when they are justified.

Accessibility considerations​

Custom fonts can improve or harm accessibility depending on the choices you make. Here are the key principles to follow:

Choose accessible fonts​

Some fonts are specifically designed for readability across a wide range of users. These include:

  • Open Sans, Lato, Roboto, Nunito — Sans-serif fonts with clear letterforms and generous spacing. Excellent for body text.
  • Atkinson Hyperlegible — Designed specifically for low-vision users. Available on Google Fonts and one of the best choices for accessibility-first documentation.
  • Lexie Readable — Designed for readability by people with dyslexia. If your team includes neurodiverse members, this is worth considering.

Avoid decorative or display fonts for body text. Fonts with extreme thin/thick contrast, tight letter spacing, or ambiguous characters (easily confused I/l/1 or O/0) create barriers for readers with visual impairments.

Maintain sufficient color contrast​

When using the color picker in the Google Fonts macro, always verify contrast ratios:

  • Normal text (below 18px or below 14px bold): Minimum 4.5:1 contrast ratio against the background.
  • Large text (18px+ or 14px+ bold): Minimum 3:1 contrast ratio.
  • Enhanced (AAA level): 7:1 for normal text, 4.5:1 for large text.

Common pitfalls to avoid:

  • Light gray text on white backgrounds (fails contrast requirements in both light and dark themes).
  • Colored text on colored backgrounds without sufficient luminance difference.
  • Using color as the only means of conveying information — always pair color with text labels or patterns.

Use appropriate font sizes​

  • Body text should be at least 14px, with 16px preferred for maximum readability.
  • Line height (controlled by the font's built-in metrics) should provide comfortable reading. Google Fonts generally have good built-in line heights, but very large or very small sizes may need adjustment in context.
  • Never use font sizes below 10px for any content that users need to read.

Test with assistive technology​

If your Confluence pages need to be accessible to screen reader users, verify that the Google Fonts macro content is properly read by assistive technology. The macro renders styled text within the page content flow, so screen readers should process it normally. Test with your organization's preferred screen reader (VoiceOver, NVDA, or JAWS) to confirm.

Working with brand guidelines​

Many organizations have formal brand guidelines that specify exact typefaces, sizes, and colors. Here is how to implement them in Confluence using Google Fonts for Confluence.

Match brand fonts to Google Fonts equivalents​

If your brand fonts are available on Google Fonts, use them directly — this is the ideal scenario. Many popular brand fonts like Roboto, Open Sans, Montserrat, and Lato are on Google Fonts.

If your brand uses a proprietary font not on Google Fonts, find the closest Google Fonts equivalent:

Proprietary FontClosest Google Font Equivalent
Helvetica / Neue HelveticaInter or Arimo
ArialArimo
GothamMontserrat or Proxima Nova (via similar weight/width)
FuturaJost or Spartan
GaramondEB Garamond or Cormorant Garamond
AvenirNunito Sans or Montserrat Light
Trade GothicBarlow or Oswald

These are not pixel-perfect matches, but they capture the same visual personality. For most internal documentation purposes, the differences are negligible.

Implement brand colors​

Use the color picker in the Google Fonts macro to match your brand's exact hex colors. If your brand guidelines specify primary, secondary, and accent colors:

  • Use the primary color for main headings and important callouts.
  • Use the secondary color for subheadings and highlighted text.
  • Use the accent color sparingly for emphasis or to draw attention to specific text.

Create branded page templates​

Once you have your font family, size, color, and alignment dialed in, create Confluence page templates that include pre-styled Google Fonts macros. This lets team members create new pages that are automatically on-brand without needing to manually configure the macro every time.

Performance best practices​

Adding external fonts to your pages has performance implications. Following these practices keeps your Confluence pages loading fast:

  1. Limit the number of fonts. Each additional font family adds an HTTP request. Stick to 2-3 font families maximum per page. If you are using a heading font and a body font, that is two — and that is plenty.

  2. Limit font variants. Only load the weights you actually use. If your headings use Bold (700) and body text uses Regular (400), you do not need Light (300), Medium (500), or Black (900). The Google Fonts macro loads only the variant you select, so this is handled automatically — but be mindful if you are using the macro multiple times on one page with different variants.

  3. Use variable fonts where possible. Variable fonts contain all weights in a single file, reducing HTTP requests. Google Fonts is increasingly offering variable font versions. Look for fonts tagged as "Variable" when browsing.

  4. Preview before publishing. Use the live preview in the macro to finalize your font choices before saving. This avoids the need to repeatedly edit and re-save, which also keeps your page history clean.

For a deeper dive into performance considerations, see our Google Fonts performance FAQ.

Troubleshooting common issues​

Fonts not loading​

If your styled text appears in a system font instead of the selected Google Font:

  • Check your network connection. Google Fonts load from fonts.googleapis.com. If your corporate firewall blocks this domain, the fonts will not load. Contact your IT team to whitelist the Google Fonts CDN.
  • Verify the app is still installed. Go to Confluence Settings > Apps > Manage apps and confirm Google Fonts for Confluence is listed and enabled.

Text looks different in edit mode vs published mode​

The live preview in the macro accurately reflects the published output. If you notice differences:

  • Clear your browser cache and reload the page.
  • Check whether your browser is applying its own font settings (some browsers allow custom font overrides in accessibility settings).
  • Verify you are not accidentally applying Confluence's built-in text formatting (bold, italic) on top of the macro's styling.

Macro not appearing in slash command menu​

If typing /google fonts does not show the macro:

  • Confirm the app is installed (see above).
  • Make sure you are editing a page (the slash command menu only works in edit mode).
  • Try typing /google — sometimes the full phrase needs a moment to index after installation.

Summary​

Adding custom fonts to Confluence transforms plain documentation into branded, readable, and professional content. With Google Fonts for Confluence, the process is straightforward:

  1. Install the app from the Atlassian Marketplace.
  2. Configure your font family, variant, size, color, and alignment using the macro's live preview.
  3. Apply consistent typography across your spaces, starting with high-visibility pages.
  4. Preview in both light and dark mode, verify accessibility, and test across browsers.
  5. Publish with a documented style guide so your entire team maintains typographic consistency.

The key to success is not the tool itself — it is the system you build around it. A clear font style guide, thoughtful font pairing, attention to accessibility, and regular maintenance will make your Confluence spaces look professional and stay readable for everyone.