Streaming live at 10am (PST)

Typekit Fonts in Design Mode


#1

I've attached a Typekit set to my project but when using the Typekit fonts in design mode I'm not seeing those fonts on my page. Is there anything additional that needs to be done in order for these to show up?


#2

Hi @IDEAfolder sometimes this happens and you have to wait a couple minutes for Typekit to kick in. Make sure you have the Kit selected in the Fonts page of the website's settings. Once you have it selected press "Choose" button.

In the designer the fonts will be at the bottom of the list. Let me know if you find them!


#3

OK, great. I'll check it out and get back to you. Thanks for the speedy reply!


#4

OK, so it seems that I had to republish my Kit before seeing the new fonts. I left the project for a few hours in order to give it some time. When I returned, I was still not getting the correct type faces in Design or Preview modes. I logged into Typekit and pulled up the kit that I attached to my project. I noticed that the new URL's for Webflow were in the list of allowed domains so I just clicked the Publish button and when I returned to my project the correct fonts were displayed.

I don't know if this was an isolated issue but if anyone else is having issues with adding Typekit sets to their projects ... try republishing your Kit.

Mike


#5

added API tried to refresh/republish the kit..

still not working.


#6

Yeah @amul_patel we don't know why it's taking a very long time for Typekit to active the kits for us. We're looking into this right now.


#7

@amul_patel You also have to refresh your designer for the TypeKit fonts to appear in the drop down. I'm sure you've tried that already, but just reminding everyone.


#8

stange works when I add heading and I see the fonts in the pulldown and the code..
but not in the preview/designer.

Its a real bummer.. Since I fonts are critical.


#9

Hey amul_patel, we just fixed the issue with Typekit not showing up. It should work without a hitch!


#10

Hi, I'm having a similar problem here. Entered my Typekit API token and don't see a dropdown on the fonts page.


#11

For Kits to show up you have to create them first and select fonts for them directly on Typekit. Have you created some kits yet?


#12

Ah, silly me! I had not created a kit, I've successfully added it now.

As a follow up question: It appears some weights are grayed out in the font selection even though they are included in my kit. Did I install it properly?

Thanks!


#13

Hmm, that's odd. Can you post a screenshot of the weights you have added in your kit settings (the Modal window that pops up on Typekit.com) and a screenshot of the Webflow font weight drop-down?

That would really help me out!


#14

Surely, attached! Thanks.


#15

The ones that show up in the Weights dropdown are actually Weights. In your kit you have 6 font weights selected. So this is what will show up in your weights drop down:

The other six you have selected in your kit are italic variants. You can choose the weight then click on italic.


#16

Ah, I see. The names of the weight doesn't necessarily coordinate with the weights of the font. So "Light" in Photoshop for me is actually "Ultra Light" in Webflow. Also, It appears Proxima Nova isn't loading correctly AND there is no different in Ultra-Light vs. Book for me.

Uploaded 2 screenshots with the two weights selected as well as my mock in Photoshop.


#17

That's weird I can set Ultra-light and Book on my end:

It seems that your paragraph text is helvetica or arial, not proxima nova. That's probably why the ultra light isn't working for you. Maybe there's a bug that you're running into? Can you give me your subdomain so I can see how you have things set up?

Also, when you install Proxima Nova on your pc it maybe have different weight names compared to the weight names they give to web fonts. It's strange.


#18

Up until now I actually was working on my page without publishing, just viewing in preview mode. So I published it just now and it looks like Proxima Nova is loading on there. However, it's still not loading in Design Mode.

The subdomain is http://distributionguidelanding.webflow.com/

Thanks!


#19

Looks like there was a bug when we accepted your kit - the webflow.com domain wasn't added. If you would like to manually fix it, you can add "webflow.com" to the list of domains that your TypeKit kit is aware of. You can do so here:


#20

I'm having this same issue. I've tried the following but without success:

  • Creating a new API key in Typekit
  • Deleting and creating a new kit in Typekit for the site
  • Adding Webflow.com to the kit settings allowed domains
  • Deactivating the fonts in Suitcase (on my desktop) to make
    sure there was no confusion with the browser

Any other thoughts/suggestions? This is a big frustration right now for me.