Hi! I’m trying to use the font Proxima-Nova: https://typekit.com/fonts/proxima-nova
I followed these instructions: http://tumult.com/hype/documentation/3.0/#typography
See image attached for what code i copy/pasted into Hype:
After doing this, the words ‘Proxima-Nova’ appear in my list of fonts, but the font that is rendered is not correct.
Does this make sense? What code should I copy/paste instead to make it work?
Thanks!
Eve
It looks like you may be missing the (http:) part of the URL…
<script type="text/javascript" src="http://use.typekit.net/xxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
I do not use typekit, so I may be wrong - but it is worth a try.
Thanks Greg. You’re correct.
@evejweinberg:
The code you’re using will work great when you upload it to a server. But since it is missing the protocol, it will look on your computer (the file:// protocol) for ‘use.typekit.com’. Adding https or http (depending on where you’ll be hosting this document) will resolve the issue for local testing.
Thanks @gasspence and @Daniel!
I’m a super beginner with code, so I’m still not getting this to work. I haven’t attempted to upload yet, but I need it to work local so I can ensure the kerning is correct. Can I reference the type file from the internet by using a snippet similar to this in Hype? :
<script src="http://use.typekit.net/slg2rcc.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
This snippet doesn’t do the trick, but maybe something similar? Or since I’m doing this local for now, should I reference a local path? i’m not sure what protocol means.
Thx,
Eve
Oh, and I should mentioned that I also tried using the code @gasspence pasted and that did not work either. 
Sorry – there’s also this which you need to setup: http://help.typekit.com/customer/portal/articles/6857-using-typekit-while-developing-locally
This tells typekit: I’m a developer and I wanna see fonts on my computer thank-you-very-much.
The full scoop on adding these fonts can be found here: http://j.mp/1JxgmXQ
So, I added ‘localhost’ to my typekit domain, but still no dice, so I ended up adding the fonts locally into the resources folder in Hype, following the “Declaring an @font-face style” instructions from the original link: http://tumult.com/hype/documentation/3.0/#adding-fonts
it worked! so im good 
Thx for all the help!
HI again 
Actually, this process only loaded one weight and I need both the ‘Reg’ weight and the ‘Semi-bold’ weight . I’m following the “Declaring an @font-face style” steps. I’m getting confused at step #7, because when I load in my CSS (image attached) something goes wrong. If I load NO text in that field, then Hype loads the ‘regular’ version of the font. I need regular and semi-bold.
I see the instruction to use $(resourceFolderName) but do not understand how to replicate that syntax.
Thanks again
,you´ve to write following i.e.:
@font-face {
font-family: 'corbertregular';
src: url('${resourcesFolderName}/Corbert-Regular-webfont.eot');
src: url('${resourcesFolderName}/Corbert-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('${resourcesFolderName}/Corbert-Regular-webfont.woff') format('woff'),
url('${resourcesFolderName}/Corbert-Regular-webfont.ttf') format('truetype'),
url('${resourcesFolderName}/Corbert-Regular-webfont.svg#corbertregular') format('svg');
font-weight: normal;
font-style: normal;
}
don´t forget to put the fonts (eot, woff, ttf, svg) into the resourcefolder. otherwise nothing happens.
@strmiska - thx so much! Please see my image attached. I am unsure what my ‘resourcesFolderName’ is because when I dragged the fonts into the resources folder, they are all loose in there, not within another folder. There is also this green ‘T’ icon called DDG-proxima.
I tried what you see in the picture, as well as just the word resources, like this:
@font-face {
font-family: 'DDG_ProximaNova';
src: url('${resources}font/ProximaNova-Sbold-webfont.eot');
src: url('${resources}font/ProximaNova-Sbold-webfont.eot?#iefix') format('embedded-opentype'),
url('${resources}font/ProximaNova-Sbold-webfont.woff') format('woff'),
url('${resources}font/ProximaNova-Sbold-webfont.ttf') format('truetype'),
url('${resources}font/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'DDG_ProximaNova';
src: url('${resources}font/ProximaNova-Reg-webfont.eot');
src: url('${resources}font/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'),
url('${resources}font/ProximaNova-Reg-webfont.woff') format('woff'),
url('${resources}font/ProximaNova-Reg-webfont.ttf') format('truetype'),
url('${resources}font/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DDG_ProximaNova';
src: url('${resources}font/ProximaNova-RegIt-webfont.eot');
src: url('${resources}font/ProximaNova-RegIt-webfont.eot?#iefix') format('embedded-opentype'),
url('${resources}font/ProximaNova-RegIt-webfont.woff') format('woff'),
url('${resources}font/ProximaNova-RegIt-webfont.ttf') format('truetype'),
url('${resources}font/ProximaNova-RegIt-webfont.svg#proxima_novaregular_italic') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'DDG_ProximaNova';
src: url('${resources}font/ProximaNova-Light-webfont.eot');
src: url('${resources}font/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('${resources}font/ProximaNova-Light-webfont.woff') format('woff'),
url('${resources}font/ProximaNova-Light-webfont.ttf') format('truetype'),
url('${resources}font/ProximaNova-Light-webfont.svg#proxima_nova_ltlight') format('svg');
font-weight: 300;
font-style: normal;
}
your mistake is to write font/ (${resources}font/).
correct is:
${resources}/FontName
${resources} will be replaced on export with “documentName.hyperesources”
oh -that makes sense. Good to know! I fixed the code to this, but it still doesn’t work. What else am I doing wrong?
@font-face {
font-family: 'DDG_ProximaNova';
src: url('${resources}/ProximaNova-Sbold-webfont.eot');
src: url('${resources}/ProximaNova-Sbold-webfont.eot?#iefix') format('embedded-opentype'),
url('${resources}/ProximaNova-Sbold-webfont.woff') format('woff'),
url('${resources}/ProximaNova-Sbold-webfont.ttf') format('truetype'),
url('${resources}/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold') format('svg');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'DDG_ProximaNova';
src: url('${resources}/ProximaNova-Reg-webfont.eot');
src: url('${resources}/ProximaNova-Reg-webfont.eot?#iefix') format('embedded-opentype'),
url('${resources}/ProximaNova-Reg-webfont.woff') format('woff'),
url('${resources}/ProximaNova-Reg-webfont.ttf') format('truetype'),
url('${resources}/ProximaNova-Reg-webfont.svg#proxima_nova_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DDG_ProximaNova';
src: url('${resources}/ProximaNova-RegIt-webfont.eot');
src: url('${resources}/ProximaNova-RegIt-webfont.eot?#iefix') format('embedded-opentype'),
url('${resources}/ProximaNova-RegIt-webfont.woff') format('woff'),
url('${resources}/ProximaNova-RegIt-webfont.ttf') format('truetype'),
url('${resources}/ProximaNova-RegIt-webfont.svg#proxima_novaregular_italic') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'DDG_ProximaNova';
src: url('${resources}/ProximaNova-Light-webfont.eot');
src: url('${resources}/ProximaNova-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('${resources}/ProximaNova-Light-webfont.woff') format('woff'),
url('${resources}/ProximaNova-Light-webfont.ttf') format('truetype'),
url('${resources}/ProximaNova-Light-webfont.svg#proxima_nova_ltlight') format('svg');
font-weight: 300;
font-style: normal;
}
You’re super close – just wrap the code block in <style>... <style>. The ‘Embedded Head HTML’ area places the code that field within the <head> of the document, so it could be anything.
Wrapping it in style tags will ensure that your document reads that code as CSS. Your full code would be: http://j.mp/1MlQ61O
so close! 
I used your code (wrapped mine in style tags) and it looked like it worked in the ‘CustomCSS Font loader screen’ but then Hype wont actually let me apply it to the text. It bounces back to whatever it was before. I thought maybe Hype does not support multi-weighted fonts, so then I tried to only use the code for the Semi-bold, but that does not display as semi-bold - it displays as regular.
Attached are the code I used to create the semi-bold version of the font, and a gif of what happens.
And thx!! so much for your patience here.
Very odd. We’ve seen this issue once before where the .otf file didn’t exist. Can you double check that the spelling is correct for the OTF font?
Also, can you attach your document (or send me a private message… click ‘private message’ here).
I’m also a bit confused – when using typekit, you typically don’t get access to the font files – they are usually served from their server. Did you download a package of fonts from Typekit?
Thx Daniel,
I actually dont see the ‘private message’ option on your profile page, so i’ll respond here.
I was attempting to load the font family both ways - via typekit, and also using my own files. Sorry for that confusion. The path we’ve been discussing back-and-forth today was using my own local files, because using Typekit also did not give me access to all weights.
Here is my file: https://www.dropbox.com/sh/2uu6wxkhbmmi6w6/AAARhEBVzfy-j4r2ngcjytKOa?dl=0
Thank you so much for helping me - i’m trying to use Hype for client work and I hope this works out for future projects! I’m really excited about this app.
Eve
A couple things:
You’re using {resources} -- but it should be {resourcesFolderName}. The full URL to one of your files would be: url(’${resourcesFolderName}/Filename.otf’)
<style>
@font-face {
font-family: 'DDG_ProximaNova';
src: url('${resourcesFolderName}/ProximaNova-Sbold-webfont.eot');
src: url('${resourcesFolderName}/ProximaNova-Sbold-webfont.eot?#iefix') format('embedded-opentype'),
url('${resourcesFolderName}/ProximaNova-Sbold-webfont.woff') format('woff'),
url('${resourcesFolderName}/ProximaNova-Sbold-webfont.ttf') format('truetype'),
url('${resourcesFolderName}/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold') format('svg');
font-weight: 600;
font-style: normal;
}
</style>
When you load Typekit, make sure you use the full URL. Use src=“http://use.typekit.net/slg2rcc.js” instead of src="//use.typekit.net/slg2rcc.js"
Also, can you confirm that you’ve added 127.0.0.1 and localhost to your allowed domains here? http://help.typekit.com/customer/portal/articles/6857-using-typekit-while-developing-locally ?
(If you have issues with this, please post in this thread)
Here’s a corrected document with just one font added: ProximaNova-Sbold
BangExplainer v3.hype.zip (1.4 MB)
Glad you’re liking Hype!
Here's an easier method for accessing font-weights within Typekit: