Typekit fonts

I Need Help
1

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;

2

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:

    image
    image786×1400 53.7 KB

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

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

image
image1356×1400 34.5 KB

  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:

image
image2850×736 146 KB

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:

image
image978×470 11.9 KB

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>

image
image1358×1418 85.6 KB

And the result is this:
Before:

image
image978×470 11.9 KB

After:
image
image998×394 11.9 KB

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
3

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…

4

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.

5

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?

6

You need to hit preview to see the font loaded.

7

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

8

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

9

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.

10

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.

11

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

12

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

But thanks.

13

Hi,
sorry I’m not into code so forgive my ignorance.

How can I get Typekit Museo working on my project.

I’ve got this so far.

Thanks

Screenshot 2021-09-13 at 10.26.07

/* Apply to all page */ *{ font-family: museo,serif; font-weight: 100; font-style: normal; font-family: museo,serif; font-weight: 300; font-style: normal; font-family: museo,serif; font-weight: 700; font-style: normal;
14

Hi @Stubbsy

Typekit support has been added into the latest beta of Blocs.

Maybe give the beta a try, if your are feeling explorative. But backup first, and submit any feedback, issues you may have, remember it’s a beta.

1 Like
15

Thanks @PeteSharp
so I guess this where the font ID goes, where do I get the font ID from and does this add the font straight way or do you need to do anything else? Would this add all weights and can you add multiple Adobe fonts?

Thanks

Screenshot 2021-09-13 at 16.26.34

16

No idea sorry, never used Typekit. What do the Adobe docs say? @Norm maybe able to assist here.

1 Like
17

Hi, @Stubbsy. It’s still in Beta. Proper documentation will follow once officially released. For now, just do some ‘trial and error’ :grin:

1 Like
18

Hi,
any news for this thread?
Where I can find the ID to use Adobe fonts ?
And is it possible to use the font local ? Because in Germany it is better to use the fonts on the server. When not you have the use the cookie opt in and opt out feature … and when the client not want to use cookies the website looks not good because the fonts don’t load :relieved:
Thanks
Tom

19

In your Adobe fonts subscription.

Yes. More info here:
https://help.blocsapp.com/knowledge-base/font-manager/

20

There is a post on Adobe Fonts.

https://help.blocsapp.com/knowledge-base/adobe-fonts/