Hosting Tutorial & Guide

Step-by-Step Guide to Add Typekit Fonts to WordPress

updated on May 03, 2017
Step-by-Step Guide to Add Typekit Fonts to WordPress When you pay a visit to many popular websites, you may be attracted by the beautiful fonts at one time. Indeed, you can take them as an example and customize your fonts for the better design of your website.

If you have no idea how these popular websites are able to achieve that, you can follow our step-by-step guide to add custom fonts to a WordPress site with Typekit. At the beginning, we will try to explain the benefits you can get from Typekit fonts.

Why Add Typekit Fonts?

As a webmaster, you are always looking for a method to convey your image, increase page views, and create a more popular website. As long as you learn that custom fonts will do you a favor, you are naturally on the way to explore how to add custom fonts to your WordPress site. It is true that you can purchase single font licenses, but it will add a burden to your budget.

In this situation, it is Typekit that allows you to easily access thousands of beautiful fonts due to the solid partnership with world-class type foundries. With the free plan and the annual payment, you will have more control over your budget. What's more, there is no need for you to handle the licenses if you make use of Typekit fonts.

Start with Typekit and Create the Kit You Need

In order to access the available fonts, you need to visit Typekit.com to select a proper plan. If you are limited by your budget, the free plan is available for you with 2 font families, 20 fonts synced at once, and 230+ fonts. If your budget permits, you can unlock more fonts on unlimited websites with an upgrade to a paid plan from $49.99/yr. Note that you need to sign up for an account before your subscription.

Typekit Plans

Under the Kits menu at the top right side corner is the Create New Kit button which allows you to decide how Typekit will apply to your web pages by configuring the selectors, fonts, and some other. In order to create a kit, you need to fill out the boxes on the pop-up with a name and a domain. After that, you need to click on the Continue button.

Create New Kit

On the result screen, Typekit displays two lines of JavaScript code which should go into the <head> tag of your website. For your convenience, you'd better now save the code in a text editor, for example, Notepad.

Typekit Embed Code

After a click on the Continue button, it is time for you to browse the fonts on your subscription. The free plan we have selected comes with a limited collection of fonts which are partly displayed in the below screenshot.

Typekit Fonts Library

In order to use the fonts from Typekit on your website, you need to open the fonts and then press the Web Use: Add to Kit button on the right side of the page.

Typekit Add Cart

If you choose the free plan, just add the fonts to the kit you just created. However, the premium plan allows you to create another new kit if you want. Then more choices are available in the dropdown.

Typekit Kit

In the left column, you can use the Selectors section to apply fonts to any HTML. When you publish the kit, you will view the changes on your website.

Publish Kit

Add Typekit Fonts to WordPress

In order to add Typekit Fonts to your WordPress site, the easiest way is to rely on the Typekit Fonts For WordPress plugin which can be accessible by clicking Plugins > Add New on your dashboard and then inputting the name in the search bar. Here is a detailed guide for you to install the plugin.

Typekit Plugin

On the result page of Settings > Typekit Fonts, you can make your own configuration. The first thing is to enter the whole 2 lines of code you have noted earlier into the Typekit Embed Code box. If you want to have a try on different fonts later, you are allowed to edit and republish your kit at any time.

Then you are able to define your own CSS rules without having to edit your CSS style sheet. If you have no idea on how to customize your CSS rules, you can have a reference to the below example. As a result, the Typekit fonts will apply to H2 headings on your site. At last, do not forget to click on the Save Settings button.

Typekit Plugin Configuration

Conclusion

Though it is not an easy job to add Typekit fonts to a site, we offer you a method to reach the goal. With the help of Typekit fonts, you can not only ease your budget burden but also simplify the process. Just follow the steps which are combined with screenshots. At this moment, you should have a clear idea on how to add Typekit fonts to your WordPress site.