Add different font weights from Typekit

(Stefan) #1


I tried to add a specific font weight from typekit but I always get a default weight and with my custom css settings, like you see at the attachment, nothing changes but actually I should get the bold weight of the font. How can I use different font weights?

thanks for your help!


Place your Typekit embed code in the head of your document. This gives your Tumult Hype document access to all the font-families defined in your kit.

When adding your custom font, first go to the font, you want to get the font-family specific for your font weight:

Next, click ‘show variation-specific font-family names’ at the bottom

Copy that font-family and add a new font in the Custom CSS window. No need to repaste the typekit script here again, since your document is loading it in the head. This links up the selectable name ‘Acier Bat Solid’ with the applied font families in the CSS Font-Family input field.

Now, you can select it in the typography inspector. (15.1 KB)

Importing fonts from TypeKit
When exporting my documents I can only see code in the browser
(Stefan) #3

Thanks Daniel for your quick reply.

I tried this and that makes sense to me but I still have some issues with loading the right weight. I added the typekit javascript in the header (and in the custom css field once more, I also tried just adding the code at the header, works both) and then added the font like you described.

I tried adding the different font variation (“brandon-grotesque-n7”, “brandon-grotesque” for bold and “brandon-grotesque-n4”, “brandon-grotesque” for regular) but it always shows the same weight.

Thanks in advance (27.8 KB)

(Stefan) #4



Hi @lechleitner notice the above in Daniel’s response. Do not put the code in the “Embedded Head HTML” when you do the Custom CSS part. Also to get bold you just need to click the bold icon when using this font. Don’t forget to add the font using the “custom css” option and giving it a name.

This is what the font should look like

After downloading your example I can see the font is fine. When clicking “bold” in the Typography inspector I can see your font change to the bold version.

(Nik Williamson) #6

This doesn’t solve OP’s need. Sure, getting just a bold font is easy enough. But with a lot of fonts, there can be loads of different weights that all fall under the same font. Proxima Nova is a good example of this.

The font is “proxima-nova”, but there are multiple weights. Not just regular and bold.

(Pete) #7

How about if I want a specific bold like a 700 or 600 maybe?

(Hans-Gerd Claßen) #8

for best control use the innerHTML-option to setup your styles.

tipp: seperate your css from innerHTML so you can just use classes to style your text …

(Jonathan Deutsch) #9

My recommendation is to name the different bold variants separately and treat them as entirely different fonts. Basically you’d set a font-weight in the @font-face code and give the font-family name in that block also the specific weight number. Then also use this for the Hype display name.