How to Add Typekit Fonts to A WordPress Website

How to Add Typekit Fonts to WordPress (Manually)

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.

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.

Nb:

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

Create a Kit ID

Visit Typekit.com, 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

Note the specific Kit ID for the web project; We need the Kit ID for next part.

Open Theme Editor

Visit Appearance -> Editor and select the Theme Header (header.php) file. Replace fnw3sdq with your specific Typekit Kit ID.

<!-- BEGIN Typekit Fonts for WordPress --> 
<link rel="stylesheet" href="https://use.typekit.net/fnw3sdq.css"> 
<!-- END Typekit Fonts for WordPress -->

Don’t forget to click Update File after editing.

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 will vary according to your preference. Happy styling!


Need help?

Does guide sounds 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!


Credits:

  • Cover image: Typekit.com
  • *engadget.com

Newsletter

Get an email when I write something. Strictly no BS, ever!