The Enterprise User Experience

We’ve been using Axure RP since January at work, and I have to say, I’m absolutely delighted. While at first blush, it’s interface may come off looking a bit like a mac version of a windows development tool, once you get the hang of things, it’s money.

I thought other people may find this useful, so here goes…

We are experimenting using @font-face in our enterprise web app. Out of the box, Axure dosen’t have the capability to generate the CSS to display non-standard web fonts in the browser. We’ve found that even if you have the font installed (I had planned on dealing with this later), the results varied from browser to browser. Believe it or not, IE 9 actually did a pretty good job at the rendering.

We needed a way to insert the @font-face CSS into the auto-generated CSS code that Axure spits out. A trip to Google told me that this was not baked into the product… yet.

After a bit of poking around, I found the “base” files that Axure uses as a template. These guys are located at:

Windows: \Axure\Axure RP Pro 6\DefaultSettings\Prototype_Files\resources\

On the Mac, these files can be located by browsing the contents of the Axure package in your applications folder (Resources/DefaultSettings/Prototype_Files)

Default.css is located in the \css directory. You can make changes to this file (I’d back your old one up first, just in case). Additionally, you can add folders in the resources folder. Axure will include all the files and folders you add under the /resources folder with your prototype.

I added my @font-face declarations to the default.css file, and the 3 versions of the font to a /fonts directory in resources, and viola, our prototype is sporting a nice sans-serif font that’s not Arial.

Enjoy!