SF Pro Display and SF Pro Text won't display in browser

#1

Hi -

i’m using Axure V.8. I have set up font mapping for Arial and Time New Roman to be mapped to SF Pro Text. It seems to be working when I display my project on my phone. But it doesn’t work in Google Chrome Browser - it always displays a serif font (which I believe is Times).

Can anyone shed light on how to map iphone default fonts SF Pro Display and SF Pro Text in browser?

Thanks. Tom

#2

This is an issue with Apple fonts… they don’t provide webfont versions like Google does. If you only need to see things on your computer (or a known set of computers) you can download the .ttf files from Apple dev site, install them on your computer(s) and then not have to worry about mapping fonts.

However, if you need to share this prototype more broadly, you would need to find a “close enough” webfont, or create your own webfont kit (look up font squirrel site) and post it to your own server. Here is a recent thread with some details on this:

I also just found this interesting post on Stack Overflow. Haven’t tried it out yet, but also has links to the fonts and background info: https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage

#3

Thanks for your response and tip re: Font Squirrel.

I currently have SF Pro Display and Text installed on my computer, so shouldn’t they show up when I display my project on my computer in Google Chrome?

#4

thanks for the link found what i was looking for way down in the comments:

“None of the current answers including the accepted one will use Apple’s San Francisco font on systems that don’t have it installed as the system font. Since the question isn’t “how do I use the OS X system font on a webpage” the correct solution is to use web fonts:

@font-face {
font-family: “San Francisco”;
font-weight: 400;
src: url(“https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff”);
}