How To add custom fonts to Confluence

Still need help?

The Atlassian Community is here for you.

Ask the community


Platform notice: Server and Data Center only. This article only applies to Atlassian products on the Server and Data Center platforms.

Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.

*Except Fisheye and Crucible

Summary

By default, Confluence provides Times New Roman, Helvetica or Courier fonts for use. You can use your own fonts by declaring them in a @font-face CSS rule in your Stylesheet.

You can follow Styling Fonts in Confluence guide if you want to change from default Helvetica/Arial – sans serif

Solution

If you want to use your own custom fonts, you can do the following:

  1. First you need to declare the new font using CSS @font-face.
    You can use fonts located on local network, web services, such as google or simply attach them to a Confluence page and point to that attachment in your declaration, just don't delete that page later accidentally (for example: http://confluence_url/download/attachments/65641/attachment-name.ttf)
    Here is a format for declaration

     @font-face {
        font-family: 'YourFontName'; /*a name to be used later*/
        src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
    }

    (info) Here is an example of declaration for "Pirata One" font available on Google Fonts (https://fonts.google.com/specimen/Pirata+One

    @font-face {
      font-family: 'Pirata One';
      src: url(https://fonts.gstatic.com/s/pirataone/v15/I_urMpiDvgLdLh0fAtofhi-Orr3CZZ4.woff2);
    }
  2. Next, you need to specify which elements the font will be applied to, you can refer to Styling Confluence with CSS

    .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-family: Times, "Times New Roman", serif;
     font-size: 14px;
    }
  3. Finally, you can put both together in Stylesheet, either for Confluence or just specific Space.
    Here is an example of earlier mentioned "Pirata One" font

    @font-face {
      font-family: 'Pirata One';
      src: url(https://fonts.gstatic.com/s/pirataone/v15/I_urMpiDvgLdLh0fAtofhi-Orr3CZZ4.woff2);
    }
    
    .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 {
    background-color: #fff !important; 
    font-family: 'Pirata One', serif;
    font-size: 14px; 
    }




Last modified on Feb 14, 2022

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.