Font embedding with @font-face (Axure 7 Web Fonts)

rp-7

#21

Hi Lennart,

I’m doing a similar thing as light_forger, trying to use fonts locally. along with trying to solve what the url value should be, where should we put the local font folder? I have a folder full of .eot, .woff, .ttf, and .svg font files to test via AxShare (if possible. it works straightforward-ly when using Generate HTML Files option).

Insight on this, if it’s possible, will be super-helpful for using the “@font-fact” functionality that Axure provides. thanks.

*edit on 5/1/14 @ 8:51pm est

So a work-around for hosting a prototype with @font-face is to use Google Drive, changing the folder’s sharing options to “public for VIEW only” (right-click folder that holds HTML and other files to change this on Google Drive site). from their, right-click again and view Details & Activity, there will be a URL available there towards the bottom, and from there you can show the HTML hosted via Google Drive, instead of using AxShare. Hope that helps in the future for anyone.

-sheriff


#22

Hey,
put the local folder inside your prototype’s HTML output directory. Then the fonts will be available offline.
Use then: ‘file./fontfolder/fontname.tff’

If online hosting is ok, use something like Google Drive or Dropbox. Get their share URL and use that instead.

Hope this helps.

Best
l.


#23

Sherrifman,

Using Lennart’s suggestion, I got FontAwesome to work locally (on device and desktop) using the following (sans bolded text since it is auto added by Axure):

@font-face {
font-family: ‘FontAwesome’;
src: url(‘file:./fontawesome-webfont.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

light_forger


#24

Just a heads up for anyone trying this. It worked, but I had to add all of the font weights after the URL.

Example:
http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800

This is for using the css method, instead of font face.


#25

My fonts show up correctly in Safari, but not in Chrome, Firefox, or IE. Any ideas?


#26

Hi Ian, thank you for the explanation, I follow the steps you mentioned, and I was able to make some fonts work but all of them.
Attached you can see the file I used.

Do you see anything wrong with the setup?

Thank you
Axure_embedded_fonts.rp (55.1 KB)


#27

Hi miriamsuchar,

Hmm, it looks like the fonts that are failing to render on Axure Share are fonts that are hosted on Typekit, is that right? If so, then you’ll want to make sure that you’ve set up the Typekit fonts on your prototype as a plugin to help make sure that they render. The forum thread below has some steps to help guide on how to set up Typekit fonts for use on Axure Share:

Hopefully that helps!


unlisted #28

closed #29