WEB FONTS AND FONT MAPPING

OVERVIEW

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

LEARNING AND

RESOURCES

Intro to Axure RP

Viewing and Sharing HTML

     Output

Organizing Widgets

Interactions

WIDGETS

Shape

Image

Line

Hot Spot

Dynamic Panel

Inline Frame

Repeater

Text Field and Text Area

Droplist

List Box

Checkbox

Radio Button

HTML Button

Tree

Table

Menu

Snapshot

Groups

Connectors

Vector Drawing

LIBRARIES

Widget Libraries

PAGES

Pages

Grids, Guides, and

     Snapping

MASTERS

Masters

Raised Events

STYLES

Page and Widget Styles

DOCUMENTATION

Flow Diagramming

Widget and Page Notes

Word Specification

Print Settings

GENERATED HTML

HTML Generator

Sidebar

Web Fonts and

     Font Mapping

AXURE SHARE

Basics

Security

Troubleshooting

     Connection Issues

Mobile App

Mobile Settings

Slack App

Hipchat Integration

Microsoft Teams Connector

AXURE SHARE ENTERPRISE

User Guide

Installation Guide

Accounts and Permissions

TEAM PROJECTS

Creating and Sharing

Working with Team Projects

Moving and Upgrading

SVN Troubleshooting

ADVANCED INTERACTIONS

Variables

Conditional Logic

Math, Functions, and

     Expressions

Adaptive Views

INSTALLATION

TROUBLESHOOTING

GUIDES

Mac

Windows

REFERENCE

MORE RESOURCES

© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

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 Web Fonts tab of the HTML Generator. Use this feature if your prototype includes any non-web-safe fonts—those not installed by default on most operating systems—and if its generated HTML 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.

USING WEB FONTS

In Axure RP, go to "Publish > Generate HTML Files" to open the HTML Generator settings. In the left column, click "Web Fonts" to open that tab. At the top of the tab, click the green "+" icon to create a new web font reference, and enter your web font's name in the "Name" field.


Next, check your font-hosting provider or company style guide for information on how to embed your web font. If you're provided a CSS URL, enter it in the "URL" field in Axure RP.

If you're provided an @font-face definition, tick the radio button for "@font-face" and paste the definition into the field that appears. Note that "@font-face" and the curly brackets, "{}", are provided for you, so you only need to include the text between the brackets.


When you're finished setting up the web font reference, click "Close" to close the HTML Generator settings.

FONT MAPPING

Font mapping is a feature of Axure RP's 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; instead, build your prototype with a font you already have installed and then map that font to your desired web font.

USING FONT MAPPINGS

In Axure RP, go to "Publish > Generate HTML Files" to open the HTML Generator settings. In the left column, click "Font Mappings" to open that tab. At the top of the tab, click the green "+" icon to create a new font mapping.


In the "Font" dropdown, select the font that you want to replace. If you only want to replace a specific typeface of the font—e.g., only Arial bold—check the box for "Choose a specific typeface" and select the typeface in the "Typeface" dropdown.


Then, in the "font-family" field, enter the name of the font that you want to appear in the web browser. Note that if you checked "Choose a specific typeface", you'll need to specify a font-weight and font-style for the new font (the default for both is "normal").


When you're finished setting up the font mapping, click "Close" to close the HTML Generator settings. Then, preview your prototype to see the mapped-to font in your web browser.

Note: If you would like to try using web fonts in your prototypes but don't have access to your own web-hosted font files, take a look at our blog post on using Google Fonts in Axure RP.