How To add custom fonts to Confluence
Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.
Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. 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:
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
1 2 3 4@font-face { font-family: 'YourFontName'; /*a name to be used later*/ src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/ }ℹ️ Here is an example of declaration for "Pirata One" font available on Google Fonts (https://fonts.google.com/specimen/Pirata+One
1 2 3 4@font-face { font-family: 'Pirata One'; src: url(https://fonts.gstatic.com/s/pirataone/v15/I_urMpiDvgLdLh0fAtofhi-Orr3CZZ4.woff2); }Next, you need to specify which elements the font will be applied to, you can refer to Styling Confluence with CSS
1 2 3 4 5 6 7 8 9 10 11 12.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; }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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18@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; }
Was this helpful?