Relative url in css loaded as add-on web-resource

Hi,
In our add-on we are including a css files that refers to fonts using a relative path. The fonts are also included in the add-on.

After being served by the Confluence server the css refer to a cache directory and the browser is not able to find the referred font (i.e. opensans-regular-webfont.woff).

@font-face {
    src: url('/confluence/s/en_GB/7109/NOCACHE/999.999/_/download/resources/com.balsamiq.confluence.plugins.mockups:balsamiqWireframesEditor/opensans-regular-webfont.woff') format('woff'), url("/confluence/s/en_GB/7109/NOCACHE/999.999/_/download/resources/com.balsamiq.confluence.plugins.mockups:balsamiqWireframesEditor/OpenSans-Regular.ttf") format('truetype');
    font-family: "Open Sans";
    font-weight: normal;
    font-style: normal;
}

The font is reachable by the following URL:

/confluence/download/resources/com.balsamiq.confluence.plugins.mockups:balsamiqWireframesEditor/fonts/opensans/opensans-regular-webfont.woff

The web resources are declared in the manifest in this way

<web-resource key="balsamiqWireframesEditor" >
		<resource type="download" name="fonts/opensans/opensans.css" location="editor-b4/fonts/opensans/opensans.css"/>
		<resource type="download" name="fonts/opensans/opensans-regular-webfont.woff" location="editor-b4/fonts/opensans/opensans-regular-webfont.woff"/>
....

Is there a way to solve this issue?

Hi, @sax.

I created a sample app that can be found in this issue. I think the url in the @font-face is a bit incorrect.

Hope this helps. Cheers!

Hi Ian,
I tried to access the issue but but apparently I have no sufficient rights. Can you help?

Hi, @sax. Not sure how that happened as you are the reporter of the linked issue. I added you as a participant, kindly try again, thanks.

@sax

If you still cannot access the issue for attached project, here are the relevant snippet on how it was done.

@font-face {
    font-family: BootsSpurs_personal_use_only;
    src: url(BootsSpurs_personal_use_only.ttf);
}
<resource name="BootsSpurs_personal_use_only.ttf" type="download location="fonts/BootsSpurs_personal_use_only.ttf" />

Cheers,
Ian

Hi @sax,
this works for me with a font in {my-maven-resources-directory/fonts}:

@font-face {
	font-family: 'Permanent Marker';
	font-style: normal;
	font-weight: 400;
	src: local('Permanent Marker'), local('PermanentMarker'),
		url(./fonts/permanentmarker.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
		U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

Maybe you have to clarify the context with #requireResource("com.plugin.my:name-of-resource") so that Confluence can look up the cache itself.

Best regards
Alex

Hi, @sax.

I might have given the incorrect URL. Kindly try this this one, with the attached sample project.

Cheers.
Ian

Trick is to reference the fonts in the same web-resource bundle as the css file. At that point the font file (or image) will be relative to the css file.

Ie if you reference the css file having a public location as /css/mycss.css and the font as /fonts/myfont.ttf then the url is …/fonts/myfont.ttf

Hi all,
Sorry for the late reply but we have been really busy in the last months launching the new version of our Atlassian Cloud add-ons.

Thanks you all for the useful hints! We finally managed to correctly include and reference the fonts and the css library. The main problem was the relative url present in the original/third party css file (i.e. “…/fonts/font.woff”). The solution that is working for us consists in removing the relative path inside the css (i.e. “font.woff”) and in the add-on web resources manifest.

<web-resource key="balsamiqWireframesEditor" >
		<resource type="download" name="mycss.css" location="/css/mycss.css"/>
		<resource type="download" name="myfont.woff" location="/fonts/font.woff"/>
....

Hope this hint will be helpful for some other devs.