Everyone desires to enhance the visual design of their website. Most of the researches reveal that user experience depends on your website’s design.
According to many SEO experts, customer analysis experts, and marketers, the more appealing will your website design; more readers will engage with your site.
And typography plays a vital role in improving the overall design. As you know, many web developers are using custom fonts in their WordPress themes; we’re going to do the same.
In this tutorial, you will learn about adding Google Fonts to your WordPress website without using any plugin.
Whenever any WordPress user decides to alter anything on their website, they always look for a convenient way, and everyone knows, there are thousands of free plugins are available in the official WordPress repository.
Now and then, people keep adding more plugins, and at some point, they complain about having a poor page loading time.
Why do you need a plugin if you can accomplish it without any?
Choose Your Favorite Google Font and Add it to Your Website
There may be a chance when you looked at any website’s font and wondered how to apply that font to your website. Well, I have an answer to your question.
Although not all the fonts are available on Google Fonts, you can find some beautiful typography.
Let’s start the process.
Step 1
To select a font, you merely need to click on the red plus button. But if you want to explore the font, click on its box and you will see the different styles.
You can try changing the font weight, size, and style.
Step 2
Click to open, and you will see the instructions to use the font.
To add Google Fonts to your website, you can use two methods. I suggest you use the standard way. You can also use an “Import” method; the choice is yours.
Now the question arises, where do you need to add this <link> tag?
If you have noticed, there is an explicit instruction to add the link to the <head> tag of your website.
Step 3
As you know, a WordPress sites’ design is controlled by its WordPress theme, so you have to edit the header.php file.
To accomplish this, you need to navigate to Appearance>>Editor while logging in to your WordPress admin panel.
Step 4
To do so, search for Theme Header in the vertical navigation menu. Click to open.
Step 5
Theme Name: Theme Header(header.php)
As we have already discussed, you need to add the <link> tag to the <head> tag. It’s similar to submitting your website to Google Search Console.
You can see the <meta> tags. Paste the <link> tag you have copied from Google Fonts.
Click Update File.
Step 6
–
Well, to do so, you need to target the HTML elements using CSS.
Let me show you an example.
h1{ font-family: 'Lato', sans-serif; }
Isn’t this easy? If you know a little bit about CSS, you can modify the typography of your whole website.
If you’re not a tech-savvy person, you should mess up with the codes. If you want to, you should always backup your website, or at least the WordPress theme.
I would like to mention an alternative, you can also add Google Fonts via the functions.php file, it can be a complicated process for beginners, so for now, we stick to the most straightforward method.
Have You Ever Thought about Modifying Your Site’s Typography
My of our clients demand to improve the overall design by adding a new font, and we always use either TypeKit or Google Fonts.
As you know Google offers the free solutions, so you don’t need premium fonts. There are tons of free fonts in the Google library.
What’s your favorite font? If you’re a web developer, you may know that Roboto has been one of the most used fonts so far.
Conclusion
To avoid a plugin, you must follow the simple steps. Editing the header file of your WordPress theme isn’t so difficult.
I hope you already know how to add custom code to your website’s header and footer. It’s a one-time thing; you don’t need to touch it ever again. I hope you can do it.
Check out these top 3 WordPress hosting services:
- Know about the best wordpress web hosting by clicking here.