Confluence provides the ability to adjust its visual style via Cascading Style Sheets (CSS). With this feature, it is very easy to change the look and feel of Confluence.

This tutorial shows you to change the fonts of a normal Confluence page. We will show how to change the font and font sizes with a few lines of CSS.

Screenshot 1: Default Font in a Confluence Page

Screenshot 2: Custom Font in a Confluence Page

At the bottom of this page you can find the code for the custom font. Simply copy and paste it into the Space Stylesheet form within the Space Administration section.

Changing the fonts

In order to customise the fonts in Confluence, you first need to set the body font to the font you want. Second, you may want to adjust the font size to account for the fact that different fonts have different relative sizes.

The relevant CSS is shown below, and can be configured in Space Admin > Stylesheets. These styles change Confluence's font from its default of Helvetica/Arial – sans serif fonts – to Times/Times New Roman – serif fonts. To adjust for the fact that Times is a bit smaller than Helvetica, we increase the font size to 14 pixels.

body {
  font-family: Times, "Times New Roman", serif;
  font-size: 14px;
}
.wiki-content,
.wiki-content p,
.wiki-content table,
.wiki-content tr,
.wiki-content td,
.wiki-content th,
.wiki-content ol,
.wiki-content ul,
.wiki-content li {
  font-size: 14px;
}

The many styles which include 'wiki-content' are necessary to change the font-size for all the tags in the wiki content.

Basic Styling Tutorial
Styling Tabs in Confluence
Including Cascading Stylesheets in Themes

  • No labels

Except where otherwise noted, content in this space is licensed under a Creative Commons Attribution 2.5 Australia License.