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

rp-7

#1

Hi there,

I’m trying to embedd a webfont with @font-face in Axure 7 and can’t find any straightforward tutorials for it. I can only find information about the .css file way.
The font I’m using works fine locally but once I upload the prototype to Axshare and look at it on my mobile I see a default font.

Any ideas where I can find a step by step explanation?

Thanks a million! I’ve wasted my entire day on this already :(:bow:

Maike


#2

You will have to make sure you get the syntax of the @font-face tag right. Here is an example from Google Fonts:
http://fonts.googleapis.com/css?family=Merriweather%20Sans:400,300

Using the second tag there:
@font-face {
font-family: ‘Merriweather Sans’;
font-style: normal;
font-weight: 400;
src: local(‘Merriweather Sans Regular’), local(‘MerriweatherSans-Regular’), url(http://themes.googleusercontent.com/static/fonts/merriweathersans/v3/AKu1CjQ4qnV8MUltkAX3sL2aU247V0zTzydO4RoO9Ok.woff) format(‘woff’);

}

The opening ‘{’ and closing ‘}’ braces are already there so just add the bold portion.

  1. Add a new Web Font

  2. Select Web Font, name it and switch to @font-face

  3. Copy appropriate CSS from a hosted Web Font

  4. Make sure the font-family: property matches the Font name you want to use

Should be as simple as that!

See It Live: WebFontAtFontFace
RP File: FontMappingAtFontFace.rp (55 KB)


Need help... its Font Awesome 5
#3

Hi,

thanks for your reply! I think I did all those steps correctly when I was trying to embedd the font.
But what I realised after looking at your example .rp file is that one literally has to name every single text box in a prototype in the Widget Properties and Style tab > Font.
(Btw, I was going to attach a screengrab but the ‘insert an image’ functionality doesn’t seem to work for me in Firefox and Chrome.)
Is there a global way of doing that?

Thanks!


#4

Ian,
I appreciate the reply here, but it simply is not working. I’ve tried the CSS hack, font face, font mapping, uploading to Axshare, exporting HTML and hosting the files, all variations I’ve found for the font face CSS and naming… nothing works! I’m especially curious as to how this works on Axshare in your see it live example, because the other forums I’ve read it sounded like that wasn’t a feature yet and the HTML had to be hosted on a web server. Not sure how you can help, but I’m extremely frustrated trying to get this “feature” to work.

Aaron


#5

No worries, I understand how frustrating it can be when software doesn’t work exactly as you expect. My guess would be that you might not have the Web Font hosted anywhere. You’ll need to make sure you are using a Font that is being hosted online. Axure does not provide a method for hosting Fonts yet (there would certainly be legal concerns allowing people to host any Font, but maybe we could start a repository or similar).

Certain browser also have stricter regulations surrounding Web Fonts when you are running locally versus hosted live. If you are able to get the Font working in a regular web page and not through Axure that would be a concern and if you are able to post an example I’d like to check it out.

The best bet might be to email support at axure dot com and show them what isn’t working and they’ll be able to examine more closely and determine the exact cause. Hopefully, we can post here again afterwards with the resolution or explanation of the problem.

Not sure I follow. You will have to choose the Web Font or Mapped Font for every Widget you would like to have that Web Font (you could also put it in a Custom or Default Style, Widget Style Editor (Custom/Default Styles, Style Guide, CSS styles and Axure).

Attaching images and .rp files should definitely be working. If you can email support at axure dot com they will check it out and make sure everything is in order. I also like to use Jing, TechSmith | Jing, Free Screenshot and Screencast Software, it is great for taking quick screenshots and videos and provides free hosting as well.


#6

Thanks. The fonts are definitely hosted online… currently being used on a live site and have been cross-browser tested, so that isn’t the issue. I figured Axure support would give me the same information I already have, but maybe they can offer assistance if I provide screenshots of everything.


#7

Hi Ian,

I tried the Web Font embedding using the @font-face approach but am running into a problem. I just wanted to run some things by you to see if my interpretation is correct.

Assumption 1: Regardless if using .css or @font-face, the external url always must point to a file asset (.css or .ttf/.otf/etc.)
Assumption 2: The created font mapping with @font-face method is not selectable as a ‘font’ in the Font dropdown for any text label. Instead this value has to be typed out manually e.g., ‘MyFirstFont’ (must match the font mapping exactly).

I tried to use @font-face method with one of the Google Fonts, ‘Nothing You Could Do’. Font is available on https://www.google.com/fonts as a link http://fonts.googleapis.com/css?family=Nothing+You+Could+Do

I tried passing it in the @font-face specification as:

font-family: ‘Nothing You Could Do’;
font-style: cursive;
src: url(http://fonts.googleapis.com/css?family=Nothing+You+Could+Do);

So far I am not having any luck getting it to work. Could you please let me know if my assumptions are correct? If yes, what is wrong with the spec above? Thanks for any leads!

light_forger


#8

Hi Ian,

I think I answered my own questions after some more digging :). So based on my testing of the .css and @font-face methods, I concluded that all content must be authored locally with the target font in order to be rendered properly on other machines.

My Assumption 1 holds true for both web font methods. Assumption 2 is wrong: all the user needs to do is create the text with the appropriate font, in this case ‘Nothing You Could Do’ (no manual passing of the mapping name in the Font dropdown). Then the mapping, regardless of what is called (name can be different from font name), does the translation as long as it points to the appropriate font online. In case of Google Fonts:

Section A - to get the local font:

  1. Add the font to your font collection via ‘Add to Collection’
  2. In left hand nav click ‘Show Collection Only’
  3. To download font, press the down arrow (top right corner)
  4. Selection option 1, getting the .zip file (if > 1 font, it downloads all fonts at once)
  5. Unzip the archive, find the .ttf file and add to your system fonts.
  6. Restart Axure to get the font to appear in the font list.
  7. Add any text to the prototype with that font.

Section B - to get the @font-face mapping (when accessing on external machines/devices):

  1. From the list of fonts in your collection, click on the -> arrow or ‘Quick Use’ for the appropriate font.
  2. On that page, scroll down to step ‘3. Add this Code To Your Website’
  3. Select the ‘Standard’ tab
  4. Copy and paste the URL in a new page e.g., http://fonts.googleapis.com/css?family=Nothing+You+Could+Do
  5. This opens the @font-face spec you need!
  6. Copy this and paste it in Publish -> General HTML Files -> Web Fonts.
    NOTE 1: you must have a container created with @font-face selected
    NOTE 2: When you paste the coded, make sure to remove “@font face {” and “}” since Axure already adds this.

Hope some of you find this useful!

light_forger


#9

Thanks for all of your input on this matter Svetlin.

But I still could not get it to work using your method.

Although I did find a way to make web fonts work…

I went to the “New Features for 7.0” section (Axure RP 7 Announcement) and there is a sample of what the interface for setting up web fonts should look like.

  1. Go to the Web Fonts section of the Generate HTML panel.
  2. Use the “Link to .css fil” option. The “@font-face” option did not work for me.
  3. Copy your font’s web address in the URL box: http://fonts.googleapis.com/css?family=Lato
  4. Generate.

It works!! :thumbup:

RedDog99


#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)!