Different Ways To Add Custom Fonts In WordPress Theme
July 2nd, 2018 | by Ravi Chahar || 2 Comments |
Are you thinking about revamping your website design? Well adding custom fonts can let you give a totally new look to your website.
Nowadays most of the WordPress themes come with the built-in custom fonts which make them look premium.
There are many ways to add custom fonts in WordPress. You can use Google fonts, Typekit, and the @Font-Face CSS rule.
In this tutorial, you will learn all these three methods.
Adding Custom Fonts Using Google Fonts
Google fonts library consists of many custom fonts which are free. Just visit Google Fonts page and choose the font you want to add to your WordPress theme.
This is one of the biggest free custom fonts libraries and that’s the reason why most of the web developers recommend it.
You can scroll down and many beautiful fonts will appear. Click on any font to explore it. You will see how it looks in different sizes, bold and italic.
It will give you an idea. You will see an option to “Select this font” and a box will appear at the bottom of the screen.
Click on that dark bottom bar and you will see the procedure of using this font.
You will see two types of the codes, one is the embed code and another one is a CSS example.
To integrate this custom font with your WordPress theme, you have to add it in the <head> section. Do you know how to add custom code in WordPress header and footer?
Now, you will see the font-family which can be used to any HTML element in the theme’s style.css file.
And you have successfully added a custom font in your WordPress theme. You would be interested in checking how to add Google web fonts in WordPress.
Use Typekit For Adding Custom Fonts In WordPress
Just like Google Fonts, Typekit also consists of a bundle of pretty custom fonts. You just need to sign up for a free plan.
This is one of the most used ways to add custom fonts in WordPress.
Go to Typekit plans page and sign up. Fill all the details and you can search for the font you want to use on your website.
But before that, you have to create a new kit. You will see an option <> Kits. When you hover over it, you can use the create a new kit button.
A free account user is limited to only one kit. So use it effectively. Search for the best font and add it to your kit.
Generate the embed code and just like Google fonts, you have to add that code in the <head> section of your website.
You can also use the Typekit fonts for WordPress plugin for adding both the codes.
There is nothing different than you did earlier. You will see an example to use it in your CSS file. You can target any HTML element with that font-family.
You can also see a step by step guide to add custom fonts in WordPress using Typekit.
Adding Custom Font Using @Font-Face CSS Rule
It’s a little bit different approach. You have to download the font file from a custom font provider website like Font Squirrel.
There are different types of font files. The most used file is “Web open font format”. Though it’s quite hard to find all the fonts in this format but you can convert any other file to this one.
Download the font file in any other form like TTF and OTF and go to Font Squirrel Generator. Upload the file and use the recommended settings to convert the font file format.
You will have a ZIP file. Extract the content and upload it to your WordPress theme by creating a new “Fonts” folder in it.
It will help you help as many fonts as you want.
Either you create a child theme or directly add it to your parent theme. The choice is yours. Though for safety first, you should try it on the localhost using XAMPP or WAMP.
You have to add the @font-face CSS rule in the CSS file of your WordPress theme.
Let me show you an example.
font-family: ‘Open Sans’;
src : url(http://www.yoursite.com/wp-content/themes/yourtheme/Fonts/Open-Sans.ttf);
font-weight: normal;
}
You can easily see the font-family name while downloading the font. If you’re not so tech savvy then make sure you copy and paste the CSS for the font-family of your custom font.
To use this font, you have to target the HTML elements just like you did before and use the font-family name to adapt this font.
If everything works fine, you’re good to go. You can use this anywhere on your WordPress website. A little bit of CSS is required.
You would also be interested in a step by step guide to adding custom fonts in WordPress using font face CSS rule.
There is another method which can be altered while using @Font-Face CSS rule. The most important thing is to fill the correct path for the “Fonts” folder.
From All These Ways To Add Custom Fonts In WordPress Which One Seems Easy To You
The above-mentioned are the best ways to add custom fonts in WordPress which can be used to freshen up your website’s design.
Most of the people go with the Google fonts method because all the fonts are free and there is nothing complicated.
But many people like to explore the things which are possible with the rest two methods. Typekit is a widespread resource for custom fonts.
For advanced web designers, the @font-facte CSS rule is the best because they can search the internet to get the best font.
What’s your favorite way? Are these ways to add custom fonts in WordPress seem difficult? If you have any doubt, feel free to drop a message.
You can also connect with us on Twitter, LinkedIn, and Facebook.
Hi Ravi,
Happy Monday ?
Interesting indeed! Especially for those who wish to play around with different fonts! I have never tried, as I’ve been happy and content with the ones that came with my theme, but always good to try it out, in case they work with your blog settings, isn’t it? I’d surely be forwarding this to my better half, as he deals with all the admin of the blog.
Thanks for sharing. Have a nice week ahead ?
Hey Harleena,
Having an attractive typography adds one plug point to the design of your blog. People like to read the content written in a nice font. But if your theme has the built-in fonts then you don’t need to make any changes.
Especially, if you’re not so techie. People come to me and complain about breaking their website. I mean before you even edit the theme files, you should know a little bit about it.
Thanks for sharing your views.
~Ravi