Using the San Francisco Font and its various font-weights in Hype

Elements Typography
21

I think you’ve put the wrong code in.

In Hype, there is a special variable ${resourcesFolderName}/

Wherever you put this code within Hype it will automatically change to your Resource Folder Name

In your code you’ve put the actual resource folder name. This is not needed. You need to use

src: url("${resourcesFolderName}/SF-Pro-Display-Semibold.otf");

explicitly.

When you export the Hype document it will actually look like

VetoComply.hyperesources/SF-Pro-Display-Semibold.otf

but only after export. The “special” variable is there to make sure the hype resources folder is always the same. So, anything in the Hype document that needs to point to the resources folder name should use that variable. Then when you export it will be replaced.

22

Hello Dbear. Changed the src line but it still doesn’t get the font right. What should be in the css font-family entry? is that important? Also how do you know what is the font-weight?

23
/** semibold */ @font-face { font-family: “SF-Pro-Display-Semibold”; font-weight: 400; src: url("${resourcesFolderName}/SF-Pro-Display-Semibold.otf"); }
24

That is the code I entered

25

Please share the Hype document so we can see what you’re working with.

When you share code on the forums, click this button when you have the code selected: 46%20PM

Also please note that you need to add <style>YOUR CSS HERE</style> tags around your font code.

26

upload.hype.zip (688.8 KB)

27

Did you get the file Daniel? I’m not sure it did upload

28

Did you find anything wrong in my file? Daniel, D Bear?

29

Woah there – yup we got it

I made some small adjustments to your file – some quotes were smart quotes when should be regular quotes, and sometimes your font family name didn’t match: https://cl.ly/1i0E0k3U2c2V

upload2.hype.zip (703.0 KB)

1 Like
30

Thank you so much Daniel. I have another question for you, how do I delete all the bad code in the head of my file?

31

They are added by fonts, so you would need to delete fonts in your Resource library you don’t use. Select them, and hit the ‘-’ button at the bottom.