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

rp-7
#10

RedDog99,

I didn’t try the CSS method with Google Fonts, but I will give it a shot now :slight_smile: Thanks for testing it out!

light_forger

#11

Hi Svet,

It looks like you answered your questions already, but I’ll chime in to see if I can be any help.

First I would suggest using the “Link to .css file” whenever possible. It looks to me like this is the way of the future. You never know with the web, but I don’t see the big players supporting @font-face as well. The spec and examples of @font-face are scattered, sparse and harder to follow. I did find one decent one here, @font-face rule (Internet Explorer).

Assumption 1: This is absolutely correct. You need to directly reference a font definition. From the above spec: ‘Possible fontFormat values are “woff”, “truetype”, “opentype”, and “embedded-opentype”.’

Assumption 2: I am a little confused on this one after you follow up, so I will just say this: You can choose the Web Font directly on the Widget. In the original example “MyFirstFont” is chosen directly on the Widget, but it does have to be typed into the combo box because the OS doesn’t know about that font (we could try to add those in, in the future). You could also use a Font Mapping to map something like Arial to MyFirstFont an then you could select Arial.

Font Mappings and Web Fonts are two completely separate concepts that are very powerful together. We certainly intended them to be used together in many situations, but they by no means must be used together. I wish we had some better documentation explaining each of them in detail alone as well (we’ll look into that).

#12

Hey Ian,

Thanks for suggesting the .css method over @font-face. This is a good tip to know. The IE reference helps a lot, too. I thought ‘local’ in the @font-face spec meant local to the Designer machine, not the end user machine. This clarifies it though!

As for Assumption 2, I thought (as mentioned in the other thread), that for web fonts to work, content must be authored with the appropriate font (as the de facto method of telling the proto which labels must be web fonted). Hence, not understanding why the mapping name is typed explicitly in the drop down in select widget. Now I know that not the local font use, but this explicit typing is what clarifies for the Axure prototype which text widgets needs to get the web font(s).

A little confusing if you ask me, but I am glad I finally figured this out. Font Awesome additionally confused the situation due to its unique nature (many glyphs that must be copy/pasted). Thanks for responding to both threads and providing light in this murky situation :slight_smile:

light_forger

#13

Hi Ian,

Have you managed so far to integrate a Google .css link and upload it on Axshare?
I’m beginning to think Axure Share does not support the feature…

Please take a look at my sample attached using an OpenSans condensed

http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700

I would be most grateful if you could share your thoughts on this

Regards
Marc
GoogleFontTest.rp (58.1 KB)

#14

PM_Marc,

There is a quick fix. In the font dropdown, instead of “Open Sans” type “Open Sans Condensed”. The font dropdown corresponds not to the name entered for the font mapping (in Generation settings) but to the @font-name value in the .css file. Hope this helps!

light_forger

#15

meaning I have to adapt every widget to that? …
ok, that’s not user friendly but you’ve been a great help!

thank light_forger!

#16

Hey PM_Marc,

In addition to including Web Fonts, you can use Font Mappings. In a nutshell, you type out all of the text via a font that’s installed in your machine (or one that’s commonly used) e.g., Arial. Then under Font Mappings you can say: map Arial to Nova Square.

This assumes that you already have the Web Font Nova Square created via a mapping e.g., http://fonts.googleapis.com/css?family=Nova+Square Again, it is very important that when you map Arial to the Web Font, to not use the Web Font mapping name e.g., “my lovely mapping” but the font-family name as it is spelled out in the .css file e.g., Nova Square.

When you do this, any text entered in Arial on generating the prototype will be converted to Nova Square. The font dropdown box approach is best for per case basis.

A caveat to mention is, that I don’t know how that works for icon fonts such as Font Awesome since there we don’t have character to character mapping e.g., “a” in Arial = “a” in Nova Square. However, Font Awesome, I believe relies on Unicode mapping and thus may not be directly mappable e.g., map Arial to Font Awesome. I have not tested Font Mapping with Font Awesome, so it is just a guess.

light_forger

#17

Hi Light_Forger,

Indeed! I figured it out my self aswell. The trick of the exact font-family name also covers the richt text variable setting.
As far as Font Awesome concerns, I don’t experience any problems whats however there. Simply link to the url below via webfont embedding

http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css

regards
Marc

#18

Hi All,

Does anyone know if in the @font-face spec, the URL part can point to local copy of the font (local to the folder where the prototype is being generated) e.g., url(./fontname.ttf) type (‘truetype’)?

The reason I am asking is because I am experimenting with loading custom fonts locally. So far I am not having any luck. I tried .woff and .ttf font files. Would love to hear if anyone has tackled this before. Thanks!

light_forger

#19

Hey Svetlin,
this seems to work:

  font-family: 'FontAwesome';
  src: url('file:./fontawesome-webfont.ttf') format('truetype');

Cheers
l.

P.S.: I will add to the ebook revision, that is coming soon. :slight_smile:

#20

Hey Lennart,

I remember after my post, I did something similar and was not working. Strange! I will have to try it again. Thanks for the reply!

P.S.: Slowly getting into your book. Good stuff all around, but then again, I didn’t expect anything less :slight_smile: Just finished John Krahenbuhl’s Axure Cookbook. There are some nuggets in there that are useful (last 3 chapters to be precise)!

#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