How to refer to font file inside a Confluence plugin? - plugins

Question

I want a text use specific font style, I assign its CSS class as ".title" and the related code all are declared in a CSS file within a Confluence plugin as following:
#font-face {
font-family: 'Myriad Pro';
font-style: normal;
src: url(MyriadPro-Regular.otf) format("opentype"), local("Consolas");
}
.title {
font-family: Myriad Pro;
}
But the plugin cannot find the font file. The font file is in the same folder with the CSS file.
What should be the url for the font file?

Answer 1

For Confluence Server, a basic plugin could be defined like so:
With some files in the following structure:
/your-plugin-name/
/your-plugin-name/main
/your-plugin-name/main/java
/your-plugin-name/main/resources
/your-plugin-name/main/resources/atlassian-plugin.xml
/your-plugin-name/main/resources/css/custom.css
/your-plugin-name/main/resources/fonts/MyriadPro-Regular.otf
And an atlassian-plugin.xml like this:
<atlassian-plugin key="${project.groupId}.${project.artifactId}" name="${project.name}" plugins-version="2">
<plugin-info>
<description>${project.description}</description>
<version>${project.version}</version>
<vendor name="${project.organization.name}" url="${project.organization.url}" />
</plugin-info>
<web-resource key="your-web-resources" name="Web Resources">
<resource name="style.css" type="download" location="css/custom.css" />
<resource name="myriad.otf" type="download" location="fonts/MyriadPro-Regular.otf" />
<!-- Adding main & global contexts means that these web resources will always be loaded. -->
<context>main</context>
<context>global</context>
</web-resource>
</atlassian-plugin>
Your CSS and font files will be available globally throughout Confluence.
Your CSS file will automatically be loaded and be named something like /downloads/gfdsgfdsgf/fdsgfd/me.davidsimpson.confluence.plugins.example:your-web-resources/style.css where gfdsgfdsgf/fdsgfd is some random characters.
You should be able to reference your font files as though they are in the same directory as the css file like so:
#font-face {
font-family: 'Myriad Pro';
font-style: normal;
src: url(myriad.otf) format("opentype"), local("Consolas");
}
.title {
font-family: Myriad Pro;
}
..but note that they have new names - style.css & myriad.otf.

Answer 2

For Confluence Server
If you want something like Consolas to work in Confluence, you'd either need to ensure that the font is installed on all browsers, or use a similar web font such as Inconsolata.
If you're happy that everyone has the correct font installed, add the following to
Confluence Admin | Custom HTML | At the END of the HEAD:
<style> body { font-family: Consolas, monaco, monospace; } </style>
If you decide to use the web font, add the following to
Confluence Admin | Custom HTML | At the END of the HEAD:
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<style> body { font-family: Inconsolata, Consolas, monaco, monospace; } </style>
These assume that you want to use the Consolas font stack - where a similar font will be used if the Consolas/Inconsolata font fails to load.
For Confluence Cloud
You cannot edit CSS or add markup to the page, so this is not possible.