How to customise fonts and formatting in Confluence using in-built functionality


Styling Confluence can be problematic. There are a small number of fonts available and the formatting options are limited. This is a problem we encounter regularly with our clients so we wanted to share our recommendations for solving it in a safe way, using built in functionality.

Using the Confluence HTML Macro

We recently encountered a client that was using the Confluence HTML macro to solve this problem. The client was using the Confluence HTML macro to load a Google Web Font to format a heading.

Whilst the HTML Macro is a concise approach, introducing links to external websites raises serious concerns about Cross-Site Scripting. In addition, when used repeatedly to write a styled heading or text, the HTML Macro can impact on site performance.

HTML Macro Example

<link href="https://fonts.googleapis.com/css?family=Pirata+One" rel="stylesheet"> <h1 style="font-family: 'Pirata One'; font-size: 70px; color:; text-align: center;">Leaderboard</h1>


So what's a better way to create styled headings?

Upon finding the HTML Macro usage our technical consultants researched the best way to create styled headings using Confluence's in-built functionality.
The solution needed to be robust, secure and easy to implement. So here it is:The solution is a combination of 3 parts;

  1. Confluence's Custom Stylesheets for Spaces
  2. Google Fonts and CSS @import rule and;
  3. the Confluence Panel macro

Step by Step Example

By following the Get Started instructions, we create our own Custom Stylesheet. Remember that these can only be created and edited by an Administrator so make sure you have the right permissions before you get started.

To follow on from the HTML Macro example above, we want to use the Pirata One font from Google and have it apply to a Panel Macro when it's appropriate.

Our Custom Stylesheet looks like this:

/*** Google Fonts and CSS @import rule**/@import url('https://fonts.googleapis.com/css?family=Pirata+One'); /*** CSS rules for the Panel Macro* When a panel has a Background Color of #72bc72 use the Pirata One font as well**/.panelContent[style="background-color: #72bc72;"] {background-color: #fff !important;font-family: 'Pirata One', cursive;font-size: 70px;text-align: center;}

The first line of the stylesheet content is an @import statement were the Google Font is defined. This makes the font available to your space. 

@import url('https://fonts.googleapis.com/css?family=Pirata+One');

The second part of the Custom Stylesheet defines a CSS rule stating that: if any Panel Macro has a Background Color (a Parameter of Panel Macro) set to the value #72bc72, then the Google Font Pirata One will style any text contained in that panel.

Here is an example of what the Panel Macros parameters might look like:

And here is the resulting Panel on the page:

So there you have it, we now have a block of text on the page that uses the desired Google Font Pirata One. It will not create any performance issues if used at scale and most importantly does not introduce any security flaws. A clean, yet simple solution for Confluence Server users. 

If you have any questions or would like to know more about how our technical consultants can help you, don't be afraid to reach out via our Contact Us page. 

Speak to an Atlassian Expert today