How can I create a widget library that embeds a font in my prototypes a la your FontAwesome library?

Dave shared this question 3 years ago
Answered

Our corporate style uses the free font "Nevis" for navigation, but most of my testers do not have the font installed on their computers, so the nav is displayed in Arial or some other substitute font.


I noted with interest that your FontAwesome widget embeds the font FontAwesomeJiM, so I set out to reproduce the effect in a widget of my own.


No such luck: even after taking the following steps, I was unable to reliably get a prototype to embed the desired font:


Exported and unzipped my new widget library (containing a single "Label" component with the desired font selected)


Added a "fonts" folder with a copy of "nevis" (which, using a font-editing tool, I renamed as "NevisJiM" so that it would be distinct from the original "nevis" installed on my Mac)


Edited widgets.xml to see if that's how you embed the font via the element, as seen in the FontAwesome library


Changed all references to the font "nevis" to "NevisJiM" in widgets.xml so that the widget would be completely independent of the installed font on my Mac.


re-zipped and re-added the library to JustinMind


I wonder if there's a tutorial about embedding custom fonts as you've done with the FontAwesome library?

Comments (2)

photo
1

Hello Dave,


Unfortunately, we don't have a tutorial for this subject. However, I would be happy to submit this as a request and report back when more information is known.


Best,


Luisa

photo
1

Thanks, Luisa. I look forward to seeing it.


I would also like to commend Maciej Sawicki, a JustinMind user (and frequent contributor to this support community) and suggest that his solution to the question, "Execute serveral actions simultaneously" would be an excellent topic for a tutorial. The technique is so useful that I've given it a name: the "Sawicki Indirection Technique."


Not just as a solution to that specific problem, but, perhaps more importantly, as a way to implement DRY (Don't Repeat Yourself) practices in building prototypes. I used his technique to solve my question, "Looking for an easier way to highlight the selected nav item (and un-hilite others)," although I have to admit that I haven't (yet) documented the solution on that posting.