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.
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; }