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

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: css - How to use Apple's San Francisco font on a webpage - Stack Overflow