Custom font in Axure

I’ve been trying to add custom fonts to my prototype but nothing seems to work! I tried following the instructions in this article:

I converted it to Base64 and added it as instructed but nothing.

Then also tried uploading the fonts to our server and linking to them like so:
font-family: ‘SofiaPro’;
src: url(‘https://XXXX/ccg/fonts/SofiaPro-Regular.eot’);
src: url('https://XXXX/ccg/fonts/SofiaPro-Regular.eot’?#iefix’) format(‘embedded-opentype’),
url(‘https://XXXX/ccg/fonts/SofiaPro-Regular.woff’) format(‘woff’),
url(‘https://XXXX/ccg/fonts/SofiaPro-Regular.ttf’) format(‘truetype’);

But nothing seems to work! Does anyone know a good way to achieve this?

Need more info:

  1. Are there any errors in the browser console? Please post them if so.
  2. Is the font file successfully loaded from your domain? Look in the network tab of the browser dev tools for the font file request.
  3. Do you have the font uploaded in all those formats?
  4. Does the font-family property on the elements in your prototype match the font-family you have declared (‘SofiaPro’)?

Common issues:

  1. You don’t have CORS (Cross-Origin Resource Sharing) set correctly for your domain and the browser blocks the font request. (Not applicable if you take the embedded approach)
  2. The font-family value you declared does not match what Axure puts on the elements.

Okayy thanks,

  1. There is a browser error - css:1 Failed to load resource: the server responded with a status of 403 (Forbidden)
  2. Hmmm, there doesn’t seem to be anything showing in the network tab.
  3. Yeah the files are definitely all there and uploaded in the right place
  4. Yep, the font-family matches, I inspected the elements and it’s exactly the same.

The base64 code I tried was:
src: url(data:application/x-font-woff;charset=utf-8;base64,XXXBASE64CODEGOESHERE) format(‘woff’);
font-weight: normal;
font-style: normal;

I used Terminal to convert the .woff file.

Can’t say for sure without all the details of the error, but I think it’s likely that your server is returning a 403 error for the font files. I’d check your server configuration to make sure it will allow requests for those files from (or wherever your prototype is hosted).

Check the Network tab (or equivalent in your browser) and look for the request that goes to your domain for the font files (for example, the request to this url https://XXXX/ccg/fonts/SofiaPro-Regular.woff). See if that is in fact what’s getting the 403 response.

When you tried the encoded font embedding, did you get any errors?