Can't get San Francisco Font to embed in prototype

advanced-prototyping
newbie-question
mobile-prototyping
#1

I have tried multiple methods to embed SF font into my prototype with little success. It will show in Chrome but not Safari. Also, there are places where the regular font is showing as semibold and I can’t get them to display the correct case. I’ve tried font-face and also embedding the base-64 code into the font-face portal. Has anyone successfully navigated this?

#2

Hi!

I was just now able to do it by following this tutorial, using the converter linked to on the page. One gotcha is that the string on this page for embedding the font has slanted single quotes instead of straight ones, which you’ll need instead. Here it is, corrected

font-family:'mywebfont'; src: url(data:application/font-ttf;charset=utf-8;base64,BASE64STRINGHERE) format('truetype');

Preview

File: embedFont.rp (1.3 MB)

#3

Thanks for the response and the example! Unfortunately, it’s still not working for me. I actually copied your code into my project and still had issues. There is a noticeable difference in the fonts between the “Preview” view and the cloud view (https://hninig.axshare.com). I’m assuming the Preview is using the local fonts on my machine while the cloud is reading the base64 file. Also, it is temperamental between Safari and Chrome. Not sure what’s going on but I may have to settle for a web font instead.

#4

Hi!

That is strange. I don’t have San Francisco on my computer - which is why I mapped Arial to it in font mappings. It worked on my Android phone phone as well.

#5

Thank you! I tried to just straighten quotes and it didn’t work. I then copied and pasted your string into my prototype, and all is well.

In the meantime, I discovered that I missed the part that says that you need to base64 encode your font file and remove line breaks. So on a Mac, you need to add -A, like so:

openssl base64 -A -in /pathtofile/infile.ttf -out /pathtofile/outfile

#6

I am trying to achieve this as well desperately. However it does not work. I can’t find the defined font-faces anywhere in the generated outputs. I would assume that there will be a CSS including the web fonts or some CSS with the web fonts declarations directly in the page. But I can’t find this anywhere.

Can anyone tell me, where in the generated source the web fonts can be found?

To me it looks like my Font Mapping is working (the elements are using the mapped font). However this is of no use at all, when there is no @font-face definition for the embedded fonts anywhere in the sources.