Including font in custom theme

[Alex Yasurek]

Hi,

I am trying to include a font in my custom theme but not exactly sure how I am suppose to do this. I have a CSS declaration for font-face and this declaration in my atlassian-plugin file under web-resource:

<resource name="custom-font.ttf" type="download" location="/fonts/custom-font.ttf"></resource>

Does anyone know what else I am suppose to do to be able to use a font in a custom theme?

[Sharon Hinde]

Hi,

this is an example of how I implemented fonts in a plugin:

1.  Add all font resources, including the CSS file with font-face declaration, to a single font folder

2.  Add the web resource and file locations to atlassian-plugin.xml

<web-resource key="plugin-fonts-css" name="Plugin Fonts CSS">
    <resource name="plugin-fonts.css" type="download" location="/plugin/fonts/plugin-fonts.css"/>
    <resource name="plugin.otf" type="download" location="/plugin/fonts/plugin.otf"></resource>
    <resource name="plugin.eot" type="download" location="/plugin/fonts/plugin.eot"></resource>
    <resource name="plugin.svg" type="download" location="/plugin/fonts/plugin.svg"></resource>
    <resource name="plugin.ttf" type="download" location="/plugin/fonts/plugin.ttf"></resource>
    <resource name="plugin.woff" type="download" location="/plugin/fonts/plugin.woff"></resource>
</web-resource>

3.  In your velocity template add:

#requireResource("com.adaptavist.confluence.plugin:plugin-fonts-css")

4.   Add the required classes to the HTML in the velocity

Compared to your example I would say that the CSS file needs to be included with your web-resource for the font.

Hope this helps.