How to Add Typekit Fonts to A WordPress Website

Let’s assume you’re not happy with the “wide range” of Google fonts.  This blog post will teach you how to add Typekit fonts to your WordPress site manually without using a plugin. Skip introduction.

Typography Matters

Typography is all about adjusting the text within the design while creating compelling content. It provides an attractive appearance and preserves the aesthetic value of your content. It plays a vital role in setting the overall tone of your website and ensures a great user experience.

Typography expresses personality and is a part of your identity
Read: 5 Reasons Why Typography Matters (External Link)

Why Adobe Typekit

Adobe Typekit is a subscription service for fonts which you can sync to your computer or use on a website. Instead of licensing individual fonts, you can sign up for the plan that best suits your needs and get a library of fonts from which to choose.

Why Use Typekit?

This blog post will teach you how to add Typekit fonts to your WordPress site manually.


  • You don’t need a third-party plugin to embed Typekit fonts on a WordPress website.
  • Intended Audience: Intermediate WP users.

Add Typekit Fonts to A WordPress Website

Step 1: Create a Kit ID. Visit, select a plan and create a font kit for your website. Ignore this step if you have got the Typekit CSS or JS code in handy. Creating a Kit is dead simple, and I’m not going to explain it here.

Create a Kit ID
Credit: Adobe Help Center

Copy the specific Kit ID for the web project; We’ll use this Kit ID in the next step.

Step 2: Open Theme Editor. Visit Appearance → Editor and select the Theme Header (header.php) file. Copy and paste the following code anywhere between <head> and </head>.

Replace fnw3sdq with your Adobe Typekit Kit ID.

<!-- BEGIN Typekit Fonts for WordPress --> 
<link rel="stylesheet" href=""> 
<!-- END Typekit Fonts for WordPress -->
How to Add TypeKit Fonts To Your WordPress Website
Open image in a new tab for better viewing.

Don’t forget to click Update File after editing.

Step 3: Set Custom CSS Rules. Custom styling varies according to the WordPress theme you’re using. Visit Appearance → Customizer and look for the Additional CSS section.

Here’s an example, just for reference:

h1, h2, h3, h4, h5, h6 {
text-transform: none;
font-family: "sofia-pro",sans-serif;
font-weight: 600;

body, button, input, select, textarea {
font-family: proxima-nova;
font-weight: 400;
text-transform: none;

The set of CSS rules should be customized according to your current theme and its preferences.

Happy styling! Feel free to comment if you need any guidance. Contact me by email if you prefer dedicated support.

Need help?

Does the article sound too much of a tech jargon? I can help you set the Typekit font on your WordPress website for the price of a cup of coffee. Contact me right away!

What's faster than a VPN?

Use SocketPro. Best VPN alternative for expats in China.

How to set up a fast website in China?

I provide top-notch website optimization services for China.

See also

Free DigitalOcean CreditCheap VPS HostingSet up a blog in ChinaExpat life in ChengduSpeed up website for ChinaBest VPNs for ChinaHackintosh Journal Sponsor or Donate.

© 2020 Site Notice. Powered by DigitalOcean & GP.