in

How to add Typography in WordPress with Typekit?

How to add Typography in WordPress with Typekit?

Using the right fonts on a website is surely a crucial task. Most of the sites use custom fonts which enhances the appearance of the text and readability. In addition to that, using the right set of fonts will help you in boosting the conversion rate, and decrease the bounce rate of your site. If you are looking to add custom fonts to your site, then you should opt for Typekit. It is a premium service started by Adobe that provides tons of custom fonts which can be used on any website.

The best thing about this service is that it eradicates the need of getting an individual license for every font. Rather, you just have to get the Typekit license, and you will be able to get access to different fonts. Another great thing about these fonts is that unlike other services, it does not slow down your site. If you want to add these fonts to your site, then here we present you with the complete process of adding the same to your WordPress.

Step 1

The first thing that you need to do is create a new Typekit account. All you have to do is head over to the official Typekit website and choose the right plan for yourself. You can either choose from the free plan, or you can opt for the paid one. The free plan provides you with 280+ fonts for syncing and over 950 fonts for the web. Once you have decided which plan is most suitable for you, you need to click on the Sign-Up button. Here you need to enter all the necessary details like name, DOB, and country, and press the Sign Up button.

Typekit Sign Up

Step 2

Once you have created an account, you need to create a kit for your site. A kit allows you to select the fonts and other settings which are customized for your site. Open the Create a Kit page and enter your site name, and Domains. Upon entering the necessary information, you have to click on the Continue button where you will be provided with a JavaScript code which you need to add to your website. Make sure to note down this code.

Step 3

In the next step, you need to head select the desired fonts from the fonts library and customize them as per your needs. Once you are done with that, you need to click on the Web Use: Add to Kit button. Now the Typekit will ask you the kit in which you want to add this font. All you have to do is select your newly created kit from the drop-down menu and hit the Publish button.

Step 4

After adding the fonts, you need to add it to your WordPress site. The best way to do this is by installing and activating the Typekit Fonts for WordPress plugin to your site. Login to your WordPress admin dashboard and navigate to the Plugins> Add New page. Here you need to look for the plugin and click on the Install Now button. Upon successful installation, you need to click on the Activate Plugin link to start using it.

Step 5

Once you have installed the plugin, you need to head back to your admin area and visit the Settings> Typekit Fonts. Here you will see the first necessary thing that you need to do is register on Typekit and obtain the code. You have already obtained the code, so you need to move forward to the Typekit Embed Code field where you need to paste the code obtained from the Typekit account.

Step 5

The next field will be of Custom CSS Rules where you need to insert the CSS class where you want to use the desired font. All you have to do is visit your website and open the Inspect tool of the text where you want to add the font. Now note down the CSS code and paste it into the Custom CSS Rules filed. Make sure to click on the Save button to keep the changes and see the fonts in action.

Add Typekit Code to the Theme File

There is another method that you can follow to add the Typekit code to your WordPress. This method does not require you to install any external plugin, but you need to paste the code into the theme files manually.

Step 1

WordPress theme files are located in the core WordPress directory which can be accessed by an FTP client. Log in to your FTP client and open the root directory. Here you need to open the wp-content folder and head over to the Themes> Your Current theme folder.

Step 2

Here you need to look out for the header.php file and download it to your local system. Once you have successfully downloaded the file, you need to paste the code which you obtained from the Typekit account and save the changes to the file. Now you need to upload the file back to the same folder to reflect the changes to your site.

Step 3

Afterwards, you need to edit the sytles.css file to determine the target of the new fonts. The styles.css file is located in the wp-content> Themes folder. Now download the file to your local system and open it using any text editor. Now you need to enter the CSS code using the same method mentioned above and save all the changes to the file. Once you have saved the file, you need to upload the file back to your server to see the code in action.

Endnote

This was the complete method of adding typography in WordPress using Typekit. Though there are tons of options that provide you with different fonts, none of them gives the options which Typekit delivers. In addition to that, paying for various fonts may also cost more. Typekit only requires one payment for tons of fonts which is not only inexpensive but may also be free but with limited fonts.

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Prevent Duplicate Post Titles in WordPress?

How to Prevent Duplicate Post Titles in WordPress?

How to Update a WordPress Plugin via FTP?

How to Update a WordPress Plugin via FTP?