Typekit fonts

Hi,
I am trying to load some adobe type kit fonts in my blocs project. I have searched how to do this on here and on the web and I am still super confused and none of the ways I’ve tried seem to work. Can somebody please spell out how exactly to load in adobe typekit fonts such as proxima nova? I have the code for all the styles I need I just don’t know where to put that exactly. And then I have css for each style but I’m not sure exactly how that is supposed to be formatted and where I put that. Any help would be greatly appreciated!

I have this:
link rel=“stylesheet” href=“https://use.typekit.net/wkb7jde.css

and this:
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;

font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: normal;

Hello @msm7, and welcome to the forum, as your welcome gift I will show you how to do it:

  1. Open page preferences: (that symbol between the arrows and the name of the page)
    image

  2. Click in “Add Code” button:

  3. Copy and paste the following code to call the fonts:

<link rel=“stylesheet” href=“https://use.typekit.net/wkb7jde.css">

  1. Now you have the fonts in your project but the system don’t know where to use the fonts, so for that you have to instruct the browser to use that font, how? Lets go:

a) Add in project a H1, H2, H3 or whatever you need, in this exemple I add a H1, H2, H3 so you see how it works:

As you see all H1, H2, H3 by default use the Helvetica font, don’t change it and you will see how it appears in browser:

b) now we go instruct blocs to use H1 and H2 with the fonts and aspects that you want:

So repeat step 1 and 2 and in the code you will add the following code:

<style>
/* Apply to headings 1 and 2 */
h1, h1,
h2, h2 *{
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;
  }
  
/* Apply to heading 3 */
h3, h3 *{
font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: normal;
  }
</style>

And the result is this:
Before:


After:

Hope it helps you…

EDIT: Imagine that you want to use in all your page a specific font, in the code you can use this code:

<style>
/* Apply to all page */
*{
font-family: proxima-nova, sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
5 Likes

Thanks you so much :slight_smile: I did have that code in my header/page settings, I just wasn’t sure about the second part. So basically I really need to think about and decide ahead of time what weights of fonts I want to use where…

You can use the fonts to specific texts instead of affecting h1, h2.

For that you just need to add a text and add a class to this text, then in the second part of the code, instead of h1 you type the name of the class you give to specific text.

I’ve tried these steps (with a different font, but otherwise identical) – but nothing changes in Blocs. Clearly I’m missing some setting or other – any suggestions?

You need to hit preview to see the font loaded.

Thanks Norm – just figured out that it only works when h1, p, etc. are specified twice in the styles… why is that?

Also, is there any way to specify these site-wide, instead of page-by-page?

I’m not sure it depends how your style classes are set up in the doc.

I do all of the css settings at the adobe end. Then just drop the js in code editor site wide code area.

At adobes end you assign the items you want the font to work on h1,h2,h3 etc.

I didn’t know you could do that at the Adobe CC end… I can’t see any settings for that in CC. I know it’s outside the parameters of Blocs support, but I’d be grateful if you could point me to where those settings exist.

It’s all covered here: https://www.adobe.com/uk/creativecloud/business/enterprise/typekit-web-fonts.html

Huh… They’ve changed the entire interface. Doesn’t seem like those features are available anymore. Bummer.

But thanks.