Web fonts & Font Mapping

#1

Add a web font with your prototype by following these simple instructions! We’ll use the free Google Fonts service in this example:

Webfonts

  1. Search for the web font you want to use (check out Google Fonts). Select the font by clicking the red “+” button.


  1. A black notification bar will appear at the bottom of the page, indicating “1 Family Selected”. Click the notification to expand the options, and then copy the embed URL presented.

FontURL.png621×545 31.5 KB

  1. In Axure RP, open up the Generate HTML dialog (“Publish > Generate HTML Files”), and select Web Fonts. Click the green “+” icon, then name your font and paste the URL.


  1. Google also provides a local download for the font, which you can get by clicking the download icon shown below. After you restart Axure RP, the font will be listed in the font drop-down. When you apply that font to text in Axure and generate the HTML, the web font will be used to render it in the browser.


Font Mapping (optional)

You can also choose to map a different font in your prototype to the web font. For example, you can make all the text with Arial generate to the web font.

  1. Open the “Font Mappings” tab in the HTML generator, then press the green “+” icon and select the font that you want to have replaced by your webfont when generated. Enter the name of the webfont.


(Update) In conclusion, check out this cool use (and library)… Font Awesome!

Using a non-system font
Embed fonts in axure (RP 8)
How to import google fonts?
IMPORTANT ! Sharing project with custom FONTS for client
#2

Is there anyway to include and use an icon font like Entypo?

#3

Vote for icon font, too.

#4

I tried a few ways to setup Entypo and Font Awesome, but every time I would paste an icon—specifically from Font Awesome—Axure would crash. I’m hoping there’s a way around this.

#5

I’m using icomoon.io which includes the FontAwesome library. I agree that icon fonts are a good way to go.

#6

Just trying out web fonts, I found this useful: Download Google Fonts - Fonts.com

SkyFonts - automatically syncs Google fonts to your computer so you can see them in Axure itself too.

The only complication now is you can’t tell if you’re seeing the webfont or the local font in the prototype until you view it on your phone or something.

But it looks like if you have the font locally and use it in Axure, the Font Mapping step isn’t required - can you confirm this is the case, Paul?

#7

Does anyone now how this works, the complete workflow to include a special fonts, which is installed on my computer?
It seems that the options in the “Web font” dialogue doesn’t work.

Is this the only solution:
http://www.axure.com/forum/tips-tricks-examples/6577-import-use-any-fonts-axure.html

This solution doesn’t work on Axure Share!
Are there any better solutions?

Since “Render text as images” is not available for new axure files, i can not present any wireframe with special fonts to my clients (who haven’t installed the fonts on their computer).

Please help!

Martin

#8

No, Fishmi222 - in the v7 Beta it is the simple process detailed above and only works with web fonts, not local fonts.

The only additional step is to install the font locally if you want to see it in Axure itself - as I understand it.

#9

Milkbomb, thanks for your answer.

The problem is, that we are using special fonts to show icons and pictures.
We don’t want to convert these fonts into images, they should remain scalable for adaptive views.

Is there any possibility to use these fonts in Axshare?

The most important question would be:
Can we use converted Fonts (for font-face) from our own server in Axshare?

I have tried the options with “Web Font”, but without success.

Thanks for your help.

Martin

#10

You’d need to convert your fonts to web fonts and put them on a webserver somewhere. Then you could refer to them in the same way as Google Fonts above.

Probably.

#11

It is unbelievable, but i have found a solution for showing special fonts on Axshare!
Yes, it works.

First open Create Your Own @font-face Kits | Font Squirrel, upload your font(s), use “Optimal settings” and download the generated ZIP file.

The most important step:
Generate your Prototype with Axure on a local Machine where all your special fonts are installed!
“Render Text as images” must be disabled under “Advanced” (if this function is available, at this time not in new Beta 7 Files)
Open the prototype with Firefox and Firebug Extension.
Select with Firebug the Text with the special fonts.

In the Style pane you see something like that:
#u128 {
font-family: ‘wmpeople1 Regular’,‘wmpeople1’;
font-size: 220px;
}

Copy the second, short value of font-family, in this case “wmpeople1”.

Open the CSS File in the folder of the generated Fonts (from Fontsquirrel).
Replace the copied font-family name at two places (Bold):

font-family: ‘wmpeople1 regular’;

url(‘wmpeople1-webfont.svg#wmpeople1 regular’) format(‘svg’);

After that the example should look like this:

font-family: ‘wmpeople1’;

url(‘wmpeople1-webfont.svg#wmpeople1’) format(‘svg’);

Save the CSS File.

If you want to use more than one special fonts, copy all the generated fonts to one folder and combine all CSS-Files in one CSS file.
For each fonts must be a @font-face declaration with the correct font-family name!

Transfer the folder with the CSS and the generated fonts files to a server of your choice

If you want to show the special fonts in Firefox you have to create an .htaccess File with this content:

<FilesMatch “.(ttf|otf|eot|woff)$”>
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin “*”
</IfModule>
</FilesMatch>

Copy this .htaccess File in the same Folder on your Server (only in the folder with the css and the fonts files)

Get (copy) the Link (the URL) to the CSS File, e.g.

http://www.yourdomain.de/specialfonts/stylesheet.css

Open your Axure File.
Klick F8 and in the opend dialog “Web Fonts”
Check “Include Webfonts”
Click the Plus Icon
Name doesn’t matter
Paste your Link (URL) to the CSS File in the field “URL”.
Click “Generate” (or close the dialog)

Publish your Axure File on Axshare
And now, hopefully everything works :slight_smile:

Martin

#12

My vote for icon fonts, too.

#13

Use Axure 7’s font embedding capabilities and link to one of the web hosted icon fonts available via We Love Icon Fonts.
For example, for Entypo use “http://weloveiconfonts.com/api/?family=entypo”

#14

im using font-awsome without any issues, works great.
Our company always uses Myriad pro font and since it’s not native to tablets, we use to use a hack to get it to work, but now with the new function it makes it so much easier to accommodate this.

#15

Hi there,

Currently using Axure 7.0.0.3127, I have a serious issue using the @font-face option in the Web Fonts dialog (under Generate prototype). I hope someone can tell me what I do wrong:

I recently discovered the Redacted font, a ‘scribble’-font which makes text a step more abstract than the usual Lorem Ipsum tekst does (especially the combination of Lorem Ipsum rendered in Redacted does a good job). On Github.com, I found a zip file. This file contains 4 fonts (redacted-regular, redacted-script-bold, redacted-script-light and redacted-script-regular) in 4 different file formats (eot, svg, ttf and woff) and a css file.

I placed the 4 ttf fonts in my Windows font directory, and the fonts appear in Axure as 2 fontnames: Redacted and Redacted Script.

I made some tests to have both fonts with their variations on the page; which of coarse renders fine locally.
In meanwhile I uploaded all 16 fonts (4 fonts in 4 formats) to mywebsite.ext/font directory.

The css file(from the downloaded zip) looks like this:
@font-face {
font-family: ‘redactedregular’;
src: url(‘redacted-regular.eot’);
src: url(‘redacted-regular.eot?#iefix’) format(‘embedded-opentype’),
url(‘redacted-regular.woff’) format(‘woff’),
url(‘redacted-regular.ttf’) format(‘truetype’),
url(‘redacted-regular.svg#redactedregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘redacted_scriptbold’;
src: url(‘redacted-script-bold.eot’);
[… etcetera for the other formats …]
}
@font-face {
font-family: ‘redacted_scriptlight’;
src: url(‘redacted-script-light.eot’)
[… etcetera for the other formats …]
}
@font-face {
font-family: ‘redacted_scriptregular’;
src: url(‘redacted-script-regular.eot’);
[… etcetera for the other formats …]
}

First, I changed " src: url(’ " everywhere into " src: url('http://www.mywebsite.ext/font/ ".

Then I added 4 times a new Web Font (+ symbol) in the Web Fonts dialog;

Named it redactedregular (redacted_scriptbold, redacted_scriptlight and redacted_scriptregular - the names appearing as font-family names);

Then I choose the @font-face option and;

Filled out:
@font-face {
font-family: ‘redactedregular’;
src: url(‘http://www.mywebsite.ext/font/redacted-regular.eot’);
src: url(‘http://www.mywebsite.ext/font/redacted-regular.eot?#iefix’) format(‘embedded-opentype’),
url(‘http://www.mywebsite.ext/font/redacted-regular.woff’) format(‘woff’),
url(‘http://www.mywebsite.ext/font/redacted-regular.ttf’) format(‘truetype’),
url(‘http://www.mywebsite.ext/font/redacted-regular.svg#redactedregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

(… and filled out the same @font-face declaration for the other 3 fonts)

Finally I published the file to Axshare, but unfortunatally, no custom fonts showed up.

Anybody an idea what goes wrong?
Thanks in advance.

regards,
Igor

#16

I think part of the problem with using standardized icon fonts is that they will put the icons in the private use area. In this case how would you type the character in Axure? There would need to be some mechanism to insert a unicode character wouldn’t there?

I will try to create a custom font with the icons mapped to letters but I am not hopeful this will work either.

#17

These instructions start in the middle… :mad:

I don’t see any “quick use” button anywhere.

I just want to be able to use icomoon! Help?

#18

Hi, kblock111. The “quick use” button is on Google Fonts, on pages like this one:

Jeff

#19

Hey Kblock,

A quick heads-up if you’re going to be using icoMoon: icoMoon doesn’t do a good job of telling us which font it wants to be on the Mac, so to use it on the Mac you’ll need to:

  1. Copy your glyph.

  2. Paste it into Axure RP.

  3. Highlight the glyph.

  4. Apply icoMoon to the glyph.

On PC it should be a bit smoother. We’re looking into ways to improve the workflow on the Mac, but we want to make sure that we don’t introduce other font bugs in doing so.

#20

I"m on a pc at work. Icomoon isn’t on Google so I guess I’m still unsure if there is a way to get it into Axure?