Typekit tutorial needed

Elements Typography
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.