Do many webmasters ask how to add Google web fonts properly to a website? It is not a complicated task. If you know the procedures, it will be a minute of work. Let’s discuss this in detail.
When it comes to design an interactive good looking website, you’ve to balance the overall UI of your website. For any website, content is the most valuable part to provide service for the customer or visitor. Well-looking content can impress your visitor with first looking. As you know, a proverb like if you want to impress anyone first looking is very important, then quality matters to make them reliable.
Content looking is very much dependable on fonts. A well-organized fast speed Web Font can change your overall website experience. So, when you build your website for customers using, give importance to web fonts. Web Fonts can control a user’s mode very much for the first time.
Before knowing the step-by-step guide, first, we will learn what is web fonts or Google web fonts actually.
Google Web Fonts:
In order to build a good optimized (well looking) website, you’ve to be careful in fonts. As a result, Google Web Fonts has been playing a good impression by the web designer for their default font database. With 1000+ fonts family, Google is playing a vital role in making your website more attractive.
- 4 Easiest Ways Of Checking Your WordPress PHP Version?
Advantages of Google Web Fonts in WordPress:
By comparing with a lot of font-family, we have got that google fonts have won the customer satisfaction for their lot of advantages like…
Google web fonts are totally free for use:
The most amazing part of Google Web Fonts is that it’s totally free for all. You don’t need to pay a tiny for using their web fonts. It’s totally free of charge.
If you see another premium font like Sofia Pro, they will charge 250$ for using their 12 fonts family only. You’ve to pay $25 if you want to use only one font. A premium font makes your website more professional. Google Web fonts can do it very effectively.
Unlimited Uses:
You can use Google Web Fonts without any limitations. There have no conditions to use on all your websites. Google Fonts can take unlimited page views. While similar fonts like Typekit can take 50k page views in a month with a premium account and for free, they give support for only 25K page views. But Google Web Fonts are giving you unlimited use for free.
No License required:
Google web fonts are published as open-source. So, you can use it for web fonts without any conditions. You can print it, customize it and download it for unlimited time.
Google Web Fonts Supports Cross-Platform:
If you use any other fonts, you’ve to worry about cross-platform. They may not suit mobile using or other platforms at a time.
On the other hand, Google web fonts support multiple devices and all kinds of browsers, including Android 2.2+ and iOs 4.2+. For Google dedicated CDN (Content Delivery Network), you don’t need to worry about cross-platform anymore.
Faster Loading times:
Google fonts are very lightweight, so you don’t need to worry about loading times. Google web fonts have a reputation for faster loading times than Typekit or other self-hosted fonts family.
You’ll get a lot of advantages by using Google web fonts. So why not are you using anymore?
How to find and select Google Web Fonts:
You can easily find Google web fonts from https://fonts.google.com/. You can search Google web fonts to find out the desired one. For example, categories with Serif, Sans Serif, Language, and Font Properties. You can check in live how it will look like.
Now follow the below step to select:
- Visit the google web fonts page from the above link and choose your desired one with your needs. You can increase and decrease the styles, size and it’ll ensure to choose the right one. You can also search by typing the font name.
- Now click “Select This Point Or Style” from the above page to add the font to your list of selections.
- If you click on your selected fonts from below, you will see the setting of the font. You can customize the font from these pop-up windows also.
- Now from the import menu, you can copy the codes for the fonts and you can use it for any kind of your website. (Here, you’ll find embed code/CSS code. You will take the code with your needs)
How to add Google web fonts to your WordPress website:
Adding Google web fonts to your WordPress website makes a good impression for your use in the first mode. As there are hundreds of free fonts, you can choose according to your needs. The fonts are well-organized, fast-loading as well as no need for a license. You can check the live preview from the website also.
There are a couple of ways to add Google web fonts to the WordPress website. I will show you some of the easiest ways. You can add google web fonts to your WordPress website by mentioning below different 3 ways.
- Adding Google web fonts in theme from function.php
- Adding Google web fonts in a plugin
- Adding Google web fonts by plugins
I’ll show all the methods of adding google web fonts to your WordPress website step by step. Let’s start to add Google Web Fonts to your website accurately…
- Two Easiest Ways Of Creating a WordPress website Sitemap: Complete Guideline
Adding Google Web Fonts in theme from function.php:
This is the proper way to add Google Web Fonts to your WordPress website. Let’s check how to add fonts to a WordPress website.
How to do it:
You have to add the below code in finction.php. You will find function.php under appearance in your WordPress dashboard (WordPress Dashboad>Appearance>Editor>function.php).
WordPress Dashboad>Appearance>Editor>function.php
You can add this code by cPanel also. By cPanel, you’ve to add the mentioned code at the bottom of the page. (Make sure you’ve kept a blank line in the ending line of the code)
function xt_custom_google_fonts() {
wp_enqueue_style( 'xt-font-montserrat', '//fonts.googleapis.com/css?family=Montserrat:400,700', false );
}
add_action( 'wp_enqueue_scripts', 'xt_custom_google_fonts' );/* CSS */
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}Note: In line 3, give the URL link of your desired Google Web Fonts.
Adding Google web fonts in a plugin:
You can add Google web fonts to your WordPress website with the help of plugins. You’ll find a lot of plugins to do this, like WP Google Fonts, Fonts Plugin | Google Fonts Typography. It’s too easy to use. One difficult part you’ll find by this plugin is if you want to stylize some specific part of the text. A plugin can’t understand the code without customizing CSS or HTML classes. Escape this; you can easily add your desired Google Web Fonts to your website.
How to do it:
- Firstly, download and install the plugin (WP Google Fonts, Fonts Plugin | Google Fonts Typography) into your WordPress website.
- Then activate it and now you have to customize with your needs from the setting of the plugin that will go with your theme. If you want further customization of the font, you can add custom CSS from the appearance>Editor of the website dashboard.
I hope you’ve understood the step.
This plugin (WP Google Fonts or Fonts Plugin | Google Fonts Typography) is so popular for using Google Custom Web Fonts. It is an easier process to control web fonts on your website.
- 7 Ways/Tools to check the speed of your website?
Easy Google Fonts:
This plugin is so simple and efficient as you don’t need to edit any code. Just you’ll install the plugin and you’ve to choose the color, styles and you will get a live preview for any changes. It is very easy to use and with live preview, you can easily customize with your needs for good looking at your website. One another advantages are it is ready for translation.
How To Do?
- Firstly, download and install the plugin (Easy Google Fonts) into your WordPress website.
- Then activate it and now you have to customize with your needs from the setting of the plugin that will go with your theme. If you want further customization of the font, you can add custom CSS from the appearance>Editor of the website dashboard.
I hope you’ve understood the step of using the Easy Google Fonts plugin.
This plugin (Easy Google Fonts | Google Fonts Typography) is so popular for using Google Custom Web Fonts. It is an easier process to control web fonts on your website.
- 5 Easiest Ways To Keep Backup Your WordPress Site Manually!!
Conclusion:
That’s all. Now you can use and modify Google web fonts on your website or WordPress site.
I think you’ve understood all the methods of using Google Web Fonts for your WordPress website. Using Custom Google Web Fonts can increase your website performance with good looking.
If you face any problem, you can contact Speed Host to make it simple for you. To speed up your website, you can check this article or contact us to make your website super speedy. Thanks for staying with us.
