Typekit Fonts not Loading in Typography Manager

I have a fresh X Pro installation and have configured my Typekit kit ID under the X customizer > templates > fonts > the T icon. The font names are populating in the menus and in the inspected CSS code, but I cannot get the fonts to render in browser.

1 Like

Hi,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

Here is the requested information.

Hi there,

Where do you wish to apply your fonts? You only enabled your Typekit and created font templates, but you didn’t assigned your font templates anywhere else. Example, you should assign your Body or Heading templates in Pro > Launch > Theme Options > Typography. And if you wish some of your cornerstone elements to use Body or Heading styling, then you must change the element’s font to INHERIT. That means a custom headline element will inherit the font from the Heading template that you just assigned in Typography > Heading.

Hope this helps :slight_smile:

I don’t believe that’s it.

I did assign the body and heading templates as you advised, though I had been manually assigning fonts per element.

Still though, the fonts (Adelle and Adobe Garamond) are not rendering, even though the CSS style is rendering in the browser inspector. They are displaying in Times/Times New Roman.

I tried loading Google fonts and they do not load either.

Hi,

There is something wrong with your set-up.

The templates seems to be duplicating itself and creating an error.

This does not happen on my test sites.

Can you try reinstalling your theme.

  • Download PRO from dashboard
  • Unzip pro.zip on your computer.
  • Rename the pro folder to pro-updating.
  • Connect to your server via FTP and navigate to your /wp-content/themes/ directory.
  • Drag and drop the pro-updating folder into your themes directory.
  • Upon completion, rename the previous pro folder to pro-previous.
  • Rename pro-updating to pro. Your site will now be at the latest version.
  • Delete the pro-previous folder.
  • Visit the WordPress dashboard at least once to ensure any migration logic can run (this happens behind the scenes).

Make sure to backup your site before doing this.

Thanks

It’s not a developer error. It’s a PRO error, @paul.r , since Pro 1.1.0… duplicate the items fron typography menu. The reason: when we have a item with many numbers instead font name and we choose the font over again, then duplicate font name. My solution: set the INHERIT font for ALL (yes, A L L) items into entirely website, remove the fonts, setting all one more time and, in the end, choose my fonts from Typekit.

Hi there,

Yes, this is a known bug for Pro which is already added to our issue tracker.

Thanks for sharing your workaround.

My issue is not that fonts are duplicating in the template manager. My issue is that I cannot get any fonts to render on my website besides Times New Roman.

@Jade Jade, could you clarify that the known issue of templates duplicating is separate from my issue of fonts not rendering?

Hey There,

Jade is referring to the font template duplicating issue.

I have check your site and it turns out that you have enabled “Fonts Manager”. You will need to go to X > Launch > Templates > Fonts and edit each of your font template like the heading and body. You will need to select a different font family because by default, the body is set to “Times New Roman”.

To know more how you can make use of the Font manager, please check this out:
https://theme.co/apex/forum/t/features-font-manager/101

I also noticed that in your homepage, you added a Cornerstone’s custom page css:

.x-main h1,
.x-main .h1, 
.x-main h1 *,
.x-main .h1 * {
  font-family: 'EB Garamond', serif;
  letter-spacing: 0.006em;
  font-style: italic !important;
}

.x-main h2, 
.x-main h3,
.x-main h4 {
  font-family: 'Roboto Slab', serif;
}

.x-main .man {
   font-family: 'EB Garamond', serif;
   font-size: 1.07em;
}

.x-main .box .blurb {
  font-family: 'EB Garamond', serif;
  font-size: 1.25em;
  line-height: 1.25em;
}

.x-main .box ul * {
  font-family: 'Roboto Slab', serif;
  font-size: 1em;
  line-height: 1.25em;
}

And this sets a different font family to the targeted element.

Hope this helps.

Hi,

I have the same problem. TypeKit is connected to Font Manager, but the fonts are not rendered. The font family is correct in CSS.

I’m running the latest version of Pro and WP.

Any ideas on how to fix this?

@Dagaloni, Looks like your domain is not allowed to pull the font from your Typekit account. Here is the error,

Typekit: the domain "cfede.davidkruiniger.nl" isn't in the list of published domains for kit "mun6tyg".

Please check that in your Typekit account and fix it :slight_smile:

And please start a new thread if you’ll provide your login credentials in a secure note, it’s for security purposes and we only recommend that in your own thread.

Thanks!

Hi Rad,

Ah thank you very much! Where did you find the error?

Good to know. Thanks for the support!

Hi there @Dagaloni ,

Please refer to the troubleshooting guide here (https://helpx.adobe.com/typekit/kb/troubleshoot-adding-fonts-website.html) to resolve your issue.

Hope that helps.

Hi,

Thanks! I already fixed the issue, but I never saw such error. Can you point out where I should have seen the error?

Hi There @Dagaloni

Most of the errors will be displayed on your browser’s console log.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.