I have come across many solutions in the forum that talk about embedding a (single) font file and later mapping it to a specific font within Axure which seem to work just fine.
However, in the real world there are usually separate font files (one for each style i.e. Bold, Italic, Condensed etc.) that are required for different styles of the font to work.
I tried uploading a (encoded) Regular font file and it worked fine. When I tried to make it Bold however (using Ctrl+B) it ended up displaying as a faux bold typeface. However, the Bold typeface worked well when its associated (encoded) Bold font file was uploaded. This means that I had to replace the previously uploaded (encoded) Regular font file - which obviously ended up making all my text bold which is not something you’d want.
Is there a proven way to embed multiple font files (one for each style) that are part of the same font family and map them in a way they all can work together?
I’m sure this is a practical problem for many people out there.
Are you referring to using web fonts by linking to their .css file? If so, then you can use font mapping to get all of the different styles.
If the web font is not locally installed, then you won’t be able to select the different weights or styles when editing. You can still, however, have them show up correctly when publishing to Axure Cloud.
One way to do so is to use Font Mapping. Because font mapping allows you to specify exactly which font weight or style, you can take an existing font as a placeholder (for example Arial) and then connect it to the desired weight.
Here is an example below of how you might map Arial to a Google Font: Montserrat Underline. With these settings implemented, published versions of your prototype will show Arial Italic and Arial Bold text as the new font.
Hence, these fonts don’t have an online reference link to their .css file. I tried to encode each style separately using a Base64 encoder and used the @font-face option (next to the Link to .css) option. I also used font mapping to map the fonts appropriately.
However, only one style seems to work correctly but the last encoded file seems to mess up the previous one in ways that are not expected and I don’t understand why.
If you can show me an example of how to embed different locally installed font styles can work in Axure Cloud that’ll be nice.
