How To Add Custom Fonts In WordPress Using Typekit
April 21st, 2017 | by Ravi Chahar || 2 Comments |
Whenever you see an attractive font at any website, you may think about adding to your website too. Well, it can be done by adding the custom fonts.
There are many ways to change the typography in WordPress. Typekit is one of the biggest websites having a collection of thousands of custom fonts.
You will learn the easiest way to add custom fonts in WordPress using Typekit. You would be happy to know that you can also add Google web fonts to your website.
There are different ways to add custom fonts in WordPress including @font-face CSS rule.
The Steps To Enable The Typography With Typekit
Have you ever thought about the benefits of adding a custom font? As you know the design of your website matters a lot, to enhance it, you should always use a font which can make your posts appealing.
For better user experience, a custom font is always recommended.
NOTE : Don’t add many custom fonts because it can affect the page loading time.
Pick a better-looking typography and embed it in your WordPress theme.
Step 1:- Visit Typekit official website which has different subscription plans. There are many free and premium fonts. You can use the free version for now. If you find any good font then use it otherwise, try the premium plans.
Choose your plan and go further.
Step 2:- After signing up, you have to create a new kit. Navigate to the top-right corner and click on “<>Kits” button and create a new kit.
Step 3:- A new window will open in front of you which requires the name of the kit and the domain name for which you want to use the Typekit fonts.
Click on the continue button and a new page will open for you.
Step 4:- It will show a script code which is required to add in the <head> section of your website. For now, copy and paste this code to the writing tool like Notepad.
Step 5:- Now is the time to choose the font you want to use in your WordPress website. There are many free custom fonts which can be used.
Scroll down and choose the one you like. Whenever you open any font, it will get explored and you will see its design with different font size and the font weight.
It’s important to pick the right font.
Step 6:- After that, click on “WEB USE: ADD TO KIT” button in front of the font name. It will take you to a new page where you have to select the kit name. As for a free plan, you are allowed to create only one Kit.
The Kit name you have chosen before is required here. If you’re using the premium plan, you can create a new kit from here.
But as you have created a kit before, use that and you will reach the final step of the custom font generation.
You will see a new page consisting the guidance to use the font. To make it ready, you have to click on the “Publish” button.
Adding Custom Font In WordPress
You have generated the code using Typekit. Now is the turn to embed that font in your WordPress website.
The script code you have copied and pasted in Notepad is required to embed in the <head> section of your website.
A guide to add custom code in WordPress header and footer area will help you. But it may be hard for the beginners. If you’re a not a tech savvy person, you can use the plugin.
Install and activate Typekit Fonts For WordPress plugin.
To add the code, navigate to Settings>>Typekit Fonts and you will see two boxes.
In the “Typekit Embed Code” box, you have to add the script code saved in the Notepad file. It’s the code required to add in the header area.
NOTE : To avoid this extra plugin, you can use the same plugin you use for adding your Google Analytics code or any other custom code in WordPress <head> section.
To use the font, you have to target the HTML elements. The CSS selector will be shown while creating the Kit.
For example.
font-family: “pt-sans”;
}
It will be different for the font you choose. Every font has a unique CSS selector. You can target any HTML element of your website.
To know the element, use the right click>>inspect element method and add this code.
NOTE : If you use the Typekit fonts for WordPress plugin then you can add this CSS code in that plugin only. But if you embed the script code manually then you have to add the CSS code in the stylesheet.css file of your WordPress theme.
For beginners, the use of Typekit plugin is recommended. You wouldn’t need to edit any theme file.
I Hope You Can Easily Add Custom Fonts In WordPress Using Typekit
The procedure may seem a little bit complicated but when you go along, it wouldn’t feel that much hard.
You have to follow ethe above-mentioned steps and within a few minutes, you will have a new typography for your website.
The only thing you should remember is the CSS selector for the font you generate. To add custom fonts in WordPress using Typekit, this is the most important thing to focus on.
You can’t show any change if the CSS selector is wrong. I hope it wouldn’t be difficult for you now. If you still have any doubt, feel free to drop a comment.
You can also connect with us on LinkedIn, Twitter, and Facebook.
Related Posts
2 comments
Leave a Reply
Hi Ravi,
Custom fonts are a great way to improve the visual design of your blog.
People focus on using images, site design and even new themes.
But you can actually use the methods you’ve described here to vastly improve the look of your blog or site, simply by adopting custom fonts with Typekit (or even Google web fonts).
-Donna
Hey Donna,
I agree many people use images because they don’t have an idea about the custom fonts. There are many resource galleries which can help you choose your favorite font.
TypeKit and Google fonts are the two best options.
Thanks for stopping by.
~Ravi