Hi,
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!
Here’s more info on that: Selecting Font Weights in Typekit (tutorial)
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
Toggle.hype.zip (27.8 KB)
Anyone?
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.
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.
How about if I want a specific bold like a 700 or 600 maybe?
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 …
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.
I’m with Nik. I’d like to have access to all the weights in my kit from within the Hype text attributes box.
Absolutely, full access to weights is a route we want to go.
Typekit changed their font-weight selection behavior. Here's a guide to use all the font-weights loaded by your Typekit CSS:
