How To add custom fonts to Confluence
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:
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*/ }
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); }
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; }
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; }