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.

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.