The term “web fonts”, in the general sense, refers to the web development technique of using font files hosted on a remote server—instead of on your computer’s local hard drive—to render the letterforms you see when you browse the web. In the world of Axure RP, the term has a second, related meaning: it’s a feature that allows you to use web fonts in your diagrams by configuring your Axure RP project file to point to the fonts’ hosted locations out there on the internet.
Web-based font-hosting has been prevalent since about 2010. (The Axure RP feature has been around since version 7, released in 2013.) The year 2010 was a big one for web fonts in large part because it was when Google, in their inscrutable benevolence, debuted Google Fonts. Competitor Typekit had begun selling access to web fonts in 2009 (before being acquired by Adobe in 2011), but no one before Google had offered a high-quality library of web fonts that were free to use. (These days there are some pretty good free-to-use alternatives to Google Fonts, such as Brick.) Speculation has simmered over the years as to why Google maintains the service, but the Google Fonts site was given a Material Design makeover this past June, which I think we can take as a fairly positive sign of Google’s ongoing commitment to it.
Using Google Fonts is the easiest way to implement web fonts in your Axure prototypes. Read on for a step-by-step walkthrough of how it works. (Also, if you prefer to learn by example, download this .rp file that’s already set up with links to three different Google Fonts web fonts.)
– – –
1. Head over to fonts.google.com and browse or search for a font you’d like to use. If you want to follow along with the screenshots in this article, you can search for the “Raleway” font.
2. Click a font name to go to its profile page. Once there, click the big red “plus” icon to select the font; you’ll then see a popup notification bar at the bottom of the window.
3. Click the notification bar to expand it, and then click the “Download” icon in the top-right corner to download a zip archive of your selected fonts. Keep the Google Fonts webpage handy though, because we’ll need it again in a minute.
4. Go ahead and install the font files you downloaded and then restart Axure RP if it was already running. You’ll now be able to use your new typeface to style text as you work on your diagrams. That’s half the battle! (If you’re not sure how to install fonts on your computer, try these articles for Windows users and Mac users.)
5. Back on the Google Fonts webpage, highlight your font’s “embed URL”. You want just the piece inside the first set of quote marks, starting with “https” and ending with the font name, as shown below. Once you’ve got just that piece selected, copy it to your clipboard.
6. Fire up Axure RP and open your project’s Generate HTML dialog (“Publish > Generate HTML Files…”), and then go to the “Web Fonts” tab. Add a new entry to the web fonts table using the green “plus” button, name it after the font you downloaded, and then paste the URL you copied into the “URL” field, as shown below.
Click either “Close” or “Generate”, depending on whether you want to continue editing or generate your HTML output right away.
– – –
The Google Fonts service is convenient to use, but of course it has its limitations—the main one being that it doesn’t offer every font under the sun. If you absolutely need to use a particular font in your project, and if it’s offered via another font hosting service or if you’re planning to self-host, the process of getting set up may present a few extra hurdles.
1. Other font hosting services. If you’re the spendy type, there are a half-dozen sites out there offering fonts and web font hosting for a price. Axure customers seem to prefer MyFonts and Monotype’s Fonts.com, both of which are tried, tested, and fully compatible with Axure RP. Adobe’s Typekit will also work for pointing to web fonts, but Axure RP users who run Windows should take note: Typekit’s digital rights management (DRM) scheme makes its local fonts incompatible with Axure RP on Windows (but there’s no conflict on OS X / macOS). So if the typeface you absolutely need is only available via Typekit, you’ll want to take advantage of Axure RP’s font mappings feature (read on) so that you can use it in your prototype.
2. Font mappings. If you’d like to use a particular web font in your prototype but don’t have that font installed on your local computer, you can still make it work by using a feature called “font mappings”. This feature works by swapping out a font in your prototype for a designated web font when the project’s HTML is generated. You’ll see the local font on the Axure RP canvas, but you’ll see the web font when you view the prototype in your web browser.
To create a font mapping, head to the next tab down in the Generate HTML dialog and map any font that you already have on your computer to the web font you just configured. Here’s an example:
So in this particular example you’d design all of your text using the Gill Sans font while you worked in Axure RP, but then the text would appear in the Raleway font to you and to others visiting your hosted prototype after you published it to the web (e.g., to Axure Share).
3. Icon fonts. The popular icon set Font Awesome is included in Axure RP as of version 8; you can access it by switching to the “Icons” widget library in Libraries pane’s dropdown menu. No web fonts configuration required!
If you’d like to use a different icon set, and if it has been hosted online somewhere as a web font, the steps to get it working in Axure RP should be the same as with any other web font. Keep in mind, though, that many font icon sets have not been hosted online by their creators; they expect you to do the hosting part yourself.
If you’re having trouble getting a particular icon font working in Axure RP, try searching the forum for that particular icon font, or feel free to email the Axure product support team at firstname.lastname@example.org for assistance.
4. The “@font-face” method. If you’re using any major web fonts service, you’ll be provided with a link to a .css file as a quick and easy way to point to the hosted location of the web font you want to use. (This link is called the “embed URL” in Google Fonts, but may be called something different by the other services.) On the other hand, if you or your company has self-hosted a font, you probably won’t have a tidy CSS file to point to.
If this is the case, you’ll need to use the “@font-face” method instead of the CSS method to point to your web font when you’re configuring your Axure RP project. The @font-face method can be tricky to implement and is not the recommended method for using web fonts in Axure RP. But if you need to do it, here’s an example of how it might look:
5. Enabling cross-origin resource sharing (CORS). Self-hosting a web font is not for the faint of heart; it’s leaving “Axure RP user” territory and entering “web administrator” territory. The Axure support team probably will not be able to help you if you run into trouble with self-hosting a web font, but we have learned one useful trick from experience: you need to enable what’s called “cross-origin resource sharing”, or “CORS”, on your web server. This is pretty much the number one problem web font self-hosters run into.
But how can you enable CORS on your particular server? Fortunately, the good people over at Enable CORS are passionate about enabling CORS, will tell you when and why you’d want to, and have technical details about how to do it for a long list of server platforms.