Publishing local icon web fonts to AxShare - not appearing

#1

Hi, this is my first post here, so go gentle if I’m not using the right terminology!

What I want to achieve is to use my locally installed icon web fonts and have them appear in my AxShare prototype so others can provide feedback.

I have a set of fonts in various formats, eot, woff, ttf, svg in a fonts folder, which I’ve put in resources folder.
And I have my custom web font css file, which I put in the resources/css folder with all the other default css files.

In the Axure RP Generate HTML > Web fonts > Link to .css file field, I have the value: resources/css/ibmicons.css

The @font-face declaration specifies the relative location of the font files:

@font-face { font-family: “Ionicons”; src: url("…/fonts/ibmicons.eot?v=1.5.2"); src: url("…/fonts/ibmicons.eot?v=1.5.2#iefix") format(“embedded-opentype”), url("…/fonts/ibmicons.ttf?v=1.5.2") format(“truetype”), url("…/fonts/ibmicons.woff?v=1.5.2") format(“woff”), url("…/fonts/ibmicons.svg?v=1.5.2#Ionicons") format(“svg”); font-weight: normal; font-style: normal; }

I can paste the icon characters from the icon cheatsheet into Axure RP text, and they appear as expected, and I can resize and color them. When I publish locally, the icon characters appear in the browser fine.

However, when I publish to AxShare, the icon character appears as an outlined box.

I can see in the generated HTML that the reference to the CSS file is correct: <link href=“resources/css/ibmicons.css” type=“text/css” rel=“stylesheet”>

But it looks (from Google Chrome) that the css file isn’t there, or it’s empty. In which case the browser can’t look up the @font-face mappings to find the relatively located font files.

I’ve searched the forums for an answer and have not come with any working solution.

I’ve successfully installed fontawesome and that works locally and remotely.

How do I do this? I don’t want to have to host the web font on a remote site - I should be able to do this by publishing the generated files to AxShare, right? I’m guessing my naive understand of how Axure RP publishes generated prototype files is not a simple case of copying whatever’s in the output folder?

Thanks
Rob

#2

So the css file is definitely not being published to AxShare - why is this?

#3

Hi Rob,

I think the problem here stems from the fact that when you upload your file to AxShare, AxShare generates and stores its own files on the server. Any edits you make in the local folders on your machine won’t carry over when the file is generated on AxShare, so as a result you won’t be able to see the same successful implementation of your font icons as you would when you preview locally. Since your prototype works properly in the local preview, it will likely also work correctly if you were to upload the generated HTML files to your own server.

Besides uploading your generated HTML files to your own server, you can also host your fonts somewhere online so that you can link to them in the “Web Fonts” tab of the HTML generator. If they’re hosted online, then the generated prototype on AxShare will be able to access them so that the fonts can be properly displayed in the browser.

Hopefully that helps to explain things!

#4

FYI Rob you will also need to host them on a CDN or server with CORS enabled, otherwise Axshare will block them for security reasons since they are from a different domain. Good luck.