Selecting Font Weights in Typekit or via External CSS (tutorial)

Here's a method for selecting font-weights in Hype after you've added your Typekit CSS kit to your page.

If you want to jump to the solution: use a class .fw100 { font-weight: 100 !important } and set this in Hype's Identity Inspector. Read on for more info and a helper CSS file to make targeting these font-weights easier.


Setting up your Typekit Font + Selecting Weights

First, select your font and 'activate' the weights you want. Here's a guide for comparing the numeric values with words like 'thin' and 'bold': font-weight - CSS: Cascading Style Sheets | MDN

Once you choose your fonts + weights in Typekit, you can then get a quick chart of what you're downloading from Typekit's servers:

We know we have these variants enabled for this specific proxima-nova font family:

  • 100 / thin
  • 400 / normal
  • 400 / italic
  • 700 / bold
  • 700 / bold italic

Adding the Font-Family to Hype

We can now add our CSS URL to the <head> of your Hype document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on 'Edit HTML Head' in the Document Inspector.

Next, switch to the Typography inspector and click 'Add more Fonts' and select 'Custom CSS'

... And Add your @font-face

This will be the only custom font we need to add for Proxima Nova. In most cases, you will have multiple fonts downloaded from Typekit, but you will only have a single CSS URL. If you only have one Typekit font, you can definitely add your CSS URL above your <style> tag if you want.

Ok now we can use Proxima 'Regular' (aka font-weight 400) anywhere in our document. We can also bold, italic, and underline by just selecting those buttons in the Typography inspector. When we want to start using our other font-weights, we need to use classes to assign Font-weights.

Font-Weight Helper CSS

The CSS below can be copied directly into the <head> of your document, or you can add it as a .css file to your resources library. All it does it tell anything with this 'class' to DEFINITELY be a certain font-weight.

<style> 
.fw100 {
    font-weight:100 !important;
}
.fw200 {
    font-weight:200 !important;
}
.fw300 {
    font-weight:300 !important;
}
.fw400 {
	/* note: this is 'regular' and typically doesn't need
	to be applied */
    font-weight:400 !important;
}
.fw500 {
    font-weight:500 !important;
}
.fw600 {
    font-weight:600 !important;
}
.fw700 {
    /* note, this is the same as selecting 'bold' 
    in the typography inspector so is also not required */
    font-weight: 700 !important;
}
.fw700 {
    font-weight:700 !important;
}
.fw800 {
    font-weight:800 !important;
}
.fw900 {
    font-weight:900 !important;
}
</style>

(Or use this URL to load this helper in the 'head' of your document':

<link rel="stylesheet" href="https://gitcdn.xyz/repo/themorgantown/8cb58cb8be685f8bf816424596d0b12f/raw/7a80cf896c996f28f144acea7b11af9b48057bb1/font-weight-helper.css"> 

Once this is in place, you can add fw100 to any Hype element and text within it will become 'light'. And a class of fw900 will be extra bold. If you don't see the correct weight when applying a class, double check that you have that weight published in your Typekit project.

Demo Hype Document

You can see this in action in the attached Hype document: FontWeightTest.hype 3.zip (1023.9 KB)

Another method for accomplishing this can be found here: Typekit tutorial needed - #4 by CCG

In this method, the individual font-weights are paired with the font-family.

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

The terminology around 'Thin' 'Light' is not a super-defined standard, but this is a good reference:

Interspersing Font Weights in Text

If you want to use font-weights inline in your CSS, the format would be:

This is my regular text <span style="font-weight: 700">this text is font-weight 700</span>

Or if you have the helper enabled, you could also use:

This is my regular text <span class="fw700">this text is font-weight 700</span>
1 Like

Great discussion, Daniel. Thanks! The issue with using the shortened classes is that they will not be reflected on your local development view. Using fw800 for example, will display as 700 weight in Hype. If you additionally define the font-family in the class using: proxima-nova !important; for example, it will display the weight properly in Hype.

2 Likes

That is expected, since I don't have the 800 weight Proxima font variant included in my CSS file: https://use.typekit.net/yjx6epe.css

Or are you using your own Typekit kit? Could you share a demo doc?