Skip to Main Content

How to add an impressive typography with Typekit

Divi: the easiest WordPress theme to use

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Have you ever wondered how those who design websites manage to use beautiful fonts on their websites? Often times, they add custom fonts using Typekit, an Adobe service that gives you access to high quality fonts. In this tutorial, we will show you how to add Typekit fonts to WordPress to improve your typography.

Why use Typekit Fonts?

Typekit is a popular subscription policing service that can save you a lot of money. Instead of paying for individual font licenses, which can get quite expensive, you can access their entire library of hundreds of fonts for free or for a flat annual rate.

The Typekit library is an impressive collection of more than 1000 fonts. Some of the most beautiful fonts you can find on the web are available on Typekit, an Adobe service.

Their free basic plan comes with access to 230+ fonts, and you can use 2 font families on one website for free. Other plans start from $ 49,99 to $ 99,99 per year.

These awesome Typekit fonts can be easily added to a website without slowing down the loading speed of your website. Fonts are served via a CDN and load much faster than if you.

Why use custom fonts on WordPress?

Typography plays a crucial role in designing your site.

Choosing good fonts will clearly communicate your personality and your message to your readers. It doesn't matter what kind of image you want to reflect (professional, friendly, casualThe fonts on your website can help project a good image.

By using the right set of fonts, you can leave a lasting impression. Selecting the right font for your WordPress site can take your website from a simple design to a striking aesthetic piece.

Good custom web fonts can:

  • Increase conversion rates
  • Lower the bounce rate of your site
  • Increase the time spent on your site
  • Create a memorable experience for users

Do you know how to use Typekit fonts? How to use Typekit to customize WordPress fonts.

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

How to start with Typekit

First, you need to create a Typekit account. To do this, simply go to "Typekit.com" and compare the available plans.

You will need to choose which plan you want to use. The free plan limits you to one website and includes access to limited fonts. You may want to start with the free plan to try it out, and then upgrade later. The upgrade gives you a bigger library of fonts, and you can use them on multiple websites.

Creation of a kit on wordpress typekit

The next step is to create a kit. The kit allows you to put together a specific font library and settings for your website, so that typekit loading is optimal. To create your kit, add your site name and domain name, then click Continue.

Creation of a kit on wordpress typekit

Once you've finished filling in your information for your kit, Typekit will give you some JavaScript code to add to your site. You can copy and paste this code into a text editor like Notepad to save it for now. We will add it to your site in the next step of this tutorial.

For now, you can start choosing your fonts. You can browse the font library and filter them by options such as rating, weight, width, height and more.

Chiosir uen font on typekit

When you spot a font as you like, you can click on it for more details and examples. If you want to add it to your web kit, click on the “Web Use: Add to Kit” button on the right side.

Monarcha font typekit wordpress

This will bring up a pop-up where you have to add the font selected for the kit you just created.

Preview typekit typography

Now you can click on the button " publish To save the changes to your kit.

Preview typekit typography

That's all! Your font kit is now available for use on your WordPress blog.

How to add fonts typekit on WordPress

The best way to add your new custom web fonts to your WordPress blog will be by using the plugin. WordPress Typekit. Learn how to install a WordPress plugin.

We recommend Typekit fonts for WordPress plugin. After installing and activating the plugin, you can access " Settings> Typekit Fonts To configure the plugin.

Wordpress plugin typekit settings

First, you'll need to paste the JavaScript code you saved earlier into the Typekit embed code field. After that you can add CSS selectors to specify where you want to use the font on your site.

In the screenshot above, we added the font to the CSS selector " h1.site-title ».

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Your WordPress theme can use different classes for different elements. You will need to use the Inspect Element tool in your web browser to find these CSS classes.

Inspect wordpress code content

That's all for this tutorial, I hope it will allow you to add TypeKit fonts to your WordPress blog.

.

This article features 0 comments

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
13 shares
Share10
tweet
Save3