Typekit tutorial needed

Elements Typography
1

There’s a lot of info on the forums about Typekit fonts, but does anyone have a step-by-step tutorial for using multiple font weights (besides normal and bold)? I have been ripping my hair out trying to solve this, without luck. Google fonts are a breeze, but I need Typekit for some projects and I cannot get multiple weights to work. I’m looking for the most sensible and efficient workflow for this. Thanks in advance!

2

I have no knowledge about Typekit, but, if you can download woff2 files from there, you can just import individual woff2 files of each weight and add them as seperate fonts in Hype. That’d be my workflow. I don’t know if there’s some other way.

3

Thanks for your reply, but Typekit fonts are hosted by Adobe so there is not a download font in these cases.

4

Update…finally concluded that the only way to do this was by using custom classes for all the weights I needed. It’s not an ideal solution since it doesn’t use the Hype font interface, but at least it works. For any Hype users who want a step by step on how to do this: here it is:

  1. Go to Typekit and create the font set you want. Remember, you can have multiple families in one project.

  2. In Hype, add your new font set using the custom CSS option in the font menu by pasting the CSS link from Typekit into the “Embedded Head HTML” box. Then make sure you put in the CSS font family name for the specific font you want, exactly as it appears in Adobe.

  3. The font will now appear in your menu, but it will only display the first weight from your list. For example, if you put in Arpona light, medium and heavy, it will show you light, but you won’t be able to select medium or heavy. So go to your Head HTML from the Document tab and create a style tag after the Typekit link with custom classes for the weights and styles you want. Like so:

.arponaSemi {
font-family: arpona, serif !important;
font-weight: 600 !important;
font-style: normal !important;
}

.arponaLight {
font-family: arpona, serif !important;
font-weight: 100 !important;
font-style: normal !important;
}

.arponaLightIt {
font-family: arpona, serif !important;
font-weight: 100 !important;
font-style: italic !important;
}

.arponaHeavy {
font-family: arpona, serif !important;
font-weight: 800 !important;
font-style: normal !important;
}

  1. Now go back to your scene and select a text box. Go into the Identity tab and in the “Class Name” box, insert one of your custom classes: for example, arponaHeavy from the list above.

  2. That’s it. Now you can access all your weights by assigning classes, albeit with a little extra work.

5

Typekit used to make this a little easier, ( you could use something like proxima-nova-n7 as a class) but that likely added some bulk to their CSS. Here's a method that essentially follows what you're doing by using Classes: