What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Use Typekit in WordPress

How to Use Typekit in WordPress

WordPress itself offers the standard web fonts for you to display the contents online. However, are you looking to use some custom fonts that can better reflect your personality? This time, we’d like to recommend a popular font service of Typekit. In the following, we will introduce it and tell you how to use Typekit in WordPress.

Frankly speaking, the font and the typography really play the critical role in the overall design of your site. Once you choose the right set of fonts, you can effectively convey your style and information to your readers. Also, instead of looking like many other websites, the custom textual contents can look different. This can result in a lasting impression to visitors. Here, we have summarized 4 main benefits you can get from the right fonts.

  • The better and much more memorable reading experience for your visitors
  • The increased conversion rate
  • The decreased bounce rate
  • The much more reading time spent on your web contents

The General Introduction to Typekit

In fact, Typekit is the subscription-based font service. By signing up with them, you can get a quite large number of custom fonts for free or based on the flat yearly rate. At present, there are thousands of fonts available for the massive subscription or the single purchase. This great service can ensure you with the below benefits ultimately.

  • All the fonts are properly tested in the library to ensure the excellent performance for different browsers.
  • There is no need for you to handle the license or the font files. You just need to select the font you want to use and the Typekit will get the font at any location you want it to.
  • The process of font adding and display can be easy. You simply need to put your needed font together, publish the set to your website and configure each font at any time you prefer.
  • The Typekit fonts can work well on both the computer and the mobile devices.

Typekit in WordPress

Get Started with the Typekit

To get started with this font service, you firstly need to sign up for a Typekit account. There are three plans you can choose, ranging from the free plan to the 99.99/year one. Here, you can pick up one plan that suits you needs the most. Personally, we recommend you to start with the free plan to try the service out. If you feel satisfied and want a larger library of fonts, you can upgrade to the paid plans.

Sign Up with Typekit

Here, you should visit the Typekit.com to sign up an account for it. The whole process only requires you to provide your name, email and password.

Create the Kit

After getting the account of this font service, now, you need to create a kit. With the kit, you can put a library of fonts altogether for the better and easier utilization. In this case, the Typekit will only need to load the font files and code needed so as to better improve the performing speed. Also, the kit can help you configure the fonts and other related settings effectively.

To create the kit, you should give it a descriptive name and provide your website domain name.

Create a Kit

After filling out the needed fields and clicking the Continue button, you can get a line of JavaScript code that you should add to your website. Now, you can save the code in your text editor. The copying and pasting process will be finished in the later step.

Add the Fonts into Your Kit

The next step is to choose and to add your target fonts into the newly created kit. You can browse all the font options from the font library of the Typekit. Note that you can clarify the choices based on weight, contrast, default figure style, language support, classification, width, height and some other conditions. Even, you can enter the font name from the search box when you have the clear target.

Font Library

After finding out your wanted font, you can hit it for getting the detailed introduction and checking the examples. If you feel great, you can click the Add to Kit button from this page. This can bring you a pop-up window that requires you to add the font to your existing kit or create a new one.

Add to Kit

Now, you can hit the Publish button for saving the changes you have made for your kit. Note that you can repeat this step to add multiple fonts you prefer.

Display the Typekit Fonts in WordPress

The easiest method for you to display the Typekit fonts in your WordPress site is by making use of the Typekit Fonts to WordPress plugin. With it, you can embed and showcase the custom fonts offered by Typekit without the need to edit your current theme.

Here, you simply need to click the Settings > Typekit Fonts button. From the Plugin Configuration part, you can enter the embed code you have got when creating the kit.

Typekit Fonts to WordPress Settings

From the Custom CSS Rules section, you can determine where you want the fonts to showcase. The sample CSS code can be found by scrolling down to the Help > CSS area. Now, you can save the settings and the custom Typekit fonts can be displayed properly.


Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.