Embed Fonts into an offline prototype


#1

Hello Community :slight_smile:
how can I embed fonts into an offline prototype?
I already found the solution to embed my google fonts into an online prototype, looks pretty nice - but my prototype has to function 100% offline and as soon as I turn off the wifi all I can see is Times New Roman :slight_smile:
Maybe it’s a piece of useful information, I downloaded the Prototype on my Axure App to the local folder.

Is there any way to integrate the font into the file?
Thank you!


#2

Be great to know how you embedded your google fonts as I can’t seem to manage this.

To work offline on my desktop I just load the fonts into the fonts folder on my machine


#3

I’ve written how to this here: https://www.nathankrischer.com/axure/2016/04/06/axure-embedded-font.html

This is another well-written source I’v discovered as well: https://www.mariekuter.com/embed-font-awesome-in-axure

It boils down to this: instead of supplying an HTTP(S) URL for your font source for the font-face declaration (won’t work offline), you supply the font-file itself as a base64 encoded data URL. That way the entire font file itself is included in the CSS that defines the font-face for your prototype.

This is more complex but that advantage is you could share it with someone and they could view it offline without also having to install fonts. If it’s just for you on your computer, I’d just install the fonts.


closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.