Hello,
I have a problem with the Averta font.
I have it locally installed on my MAC, but when I publish a project, it changes to a standard font.
Can someone advise me what to write in @font-face to make the font work correctly on export?
Thank you in advance.
The short of it is that having the font installed on your computer means only you can see it. When someone views your prototype over the internet, they need to either have the font installed or their browser needs to be able to download (and cache) it so it can render the font.
Axure doesn’t upload fonts you use when you upload your prototype. I imagine this is a deliberate choice on their end as there are likely licensing issues.
Instead you either need to use a font that’s freely available online (for example, fonts from fonts.google.com) or you need to take it upon yourself to host it somewhere the Axure prototype can access it. Another alternative is to encode and embed the font file in the @font-face declaration itself. I would only do this as a last resort as it can be a little trickier than just linking to a font that’s already hosted online. I wrote some instructions here: https://www.nathankrischer.com/axure/2016/04/06/axure-embedded-font.html, but there are other good instructions other folks have written and even tools to do the conversion for your you. There’s a link to such a tool in this post: https://www.mariekuter.com/embed-font-awesome-in-axure
I’m working on my own tool that automatically reads all necessary attributes from the font file itself so it should literally just be upload and copy/paste into Axure, no other steps, but it’s not quite ready yet.
More good info below
It depends on how you will share your prototype–where you publish/post it and how people/devices will access it.
If you are publishing to Axure Cloud or another server and you know clients (browsers, computers, devices, etc.) have web access, then you will want to map your local font to a web font and set up the web font to be served in your prototype’s HTML. Since Averta is a licensed font you will likely need a web font license to get access to it’s @font-face and/or CSS. Or, you can search for free alternatives–basically, a site that hosts the CSS so the font can be downloaded and rendered. You might want to look into security risks with this, however. Another option is to convert your local font file to a custom web font and then upload that to your own server (see this thread for info: Help with Web Fonts)
Once you have access and rights to the web font, you should be able to find its @font-face or CSS code. Look for instructions on the host website for including or embedding the web font. Here is the Axure documentation for doing this:
If you have a situation where the device running your prototype does not have web access (e.g., mobile prototype or a usability lab without external internet access) you can embed the entire webfont code in the @font-face box of the web font options in the HTML code generator (refer to documentation above.) This will increase the size of your prototype.
Here is the template, where “MyFont” is the name of your font and “MyEncodedFont” is your converted webfont code (a really long string.) This assumes you are using a TrueType format, but other formats work as well.
font-family: MyFont;
src:
url(data:font/ttf;base64,MyEncodedFont) format("truetype");