Web Fonts and Font Mapping

Use web fonts to ensure that your prototype's custom fonts render correctly on all devices. Use font mappings to quickly replace one font with another.

Note

Axure Cloud includes built-in support for Google Fonts!

If you're using Google Fonts in your prototype and are planning to publish your prototype to Axure Cloud, you don't need to set up web font definitions for your fonts.

Web Fonts

The term "web fonts" refers to the web development technique of using font files hosted on a web server — instead of on your computer’s local hard drive — to render the text you see when you browse the web. This helps to ensure that a website's chosen fonts will render correctly on any device, even if the device doesn't have those fonts installed on it.

In Axure RP, you can use web fonts by including references to web-hosted font files in the Fonts tab of the HTML Generator.

Web Safe VS Local Fonts

Use the web fonts feature if your prototype includes any fonts listed under the Local heading in the font picker — those listed under Web Safe can be used as they are — and if the prototype will be viewed on computers and devices that may not have your chosen fonts installed locally. This is particularly relevant for remote user testing and viewing on mobile devices, scenarios in which you cannot control which fonts are installed on the target device.

Web Safe fonts will render on other devices by default. You don't need to create web font entries for web safe fonts.

Local fonts require web font setup (see below) to work on other devices. Local fonts often include custom fonts.

Using Web Fonts

Open the HTML generator settings and click on the Fonts tab.
Click Add Font and enter your font's name in the Font Label field.
Check your font-hosting provider or company style guide for information on how to embed your web font, and then do one of the following:
- If you're provided the URL for a CSS file, select Link to .css and paste the URL into the URL of css file field.
- If you're provided an @font-face definition, select @font-face and paste the definition into the text area that appears. (You only need to include the text between the brackets {}.)
Close the dialog to save your settings.

Font Mapping

Font mapping is a feature of the HTML Generator that allows you to dynamically swap one font for another in your prototype's HTML output without changing the font used in Axure RP. For example, if you were to set up a font mapping from Arial to Verdana, any text styled in Arial would still appear in Arial on the Axure RP canvas, but it would appear in Verdana in your web browser.

This feature is useful in a number of scenarios:

Use a font mapping if you need to temporarily replace one font with another for comparison before making the change more permanent by updating your widget styles.
You can also use a font mapping to include a web font that you cannot or do not wish to install locally on your computer. Build your prototype with a font you already have installed and then map that font to your desired web font.

Using Font Mappings

Open the HTML generator settings and click on the Fonts tab.
Click Font Mappings, and then click Add Mapping in the window that appears.

In the first dropdown, select the font you want to replace.

If you want to replace only a specific typeface of the font — for example, only Arial bold — select the typeface in the Font style (optional) dropdown to the right.
In the Map to font family field, enter the name of the font you want to replace the first font with.

If you selected a typeface in Step 3, you'll also need to specify a font-weight and font-style for the new font (the default for both is normal).

Warning

If you leave the Map to font family field blank or enter the name of a font that your web browser doesn't have access to, the first font will be replaced with your browser's default font, usually Times New Roman.
Click Done and then close the dialog to save your settings.