Common Typekit integration problems

If you are using a Codestag theme that offers Typekit integration, here are some common issues and fixes:

Fonts won’t load

If a font is not loading on your site, check the following:

  • Is your site whitelisted in the Kit? If not, make sure the domain is whitelisted for use in the Kit.
  • Is the font added to the Kit? If you edit the Kit after initially adding it to the site, you could lose access to the font. Make sure that the font is still available in the Kit.

The fonts aren’t listed in the font select dropdowns

If your font choices are not showing in the font select dropdowns, try the following:

  • Try to reload your fonts in the select dropdowns. Follow the steps for Adding Typekit fonts listed above.
  • Verify that the Kit ID you are using is correct. Check your Typekit account to make sure that you are using the right Kit ID and it has the correct fonts loaded.
  • Loading fonts in the select dropdowns depends on your site’s ability to connect to Typekit’s font API. If this API service is down, you may experience issues. Wait 5 minutes and try loading the fonts again.

My page loads slowly after adding Typekit fonts

Using webfonts always increases page load time because it requires the download of extra assets. To make sure you are minimizing the size of these assets, we recommend the following:

  • Only add fonts that you need to your Kit. If you are not using a font, but it is in your Kit, that font is still downloaded. Remove the unnecessary font from your kit.
  • Each font on Typekit comes with a number of different variations. Only use the variations that you need. Typically, you will only need the standard, italic and bold variations.
  • Typekit fonts sometimes have different character sets for different languages. Make sure that you are only loading the character set for the language that your blog uses. Loading extra characters sets causes longer download times.