There are so many ways to add Google web fonts to WordPress. When it’s the matter of standard then you may need to know the right way for that. When the question comes to designing a good looking website, you’ve to balance overall UI of the website. In fact, you can’t ignore Interactiveness issue of your website. Content is the most valuable part to provide service for your customer or visitor for any website owner. Truly, good looking contents can impress your visitor with first looking. As you know a proverb, if you want to impress anyone first looking is very important. Then quality matters to make them reliable.
The font is the main aspect of looking content good. A well-organized first speed Web Fonts can change your overall website experience indeed. So, when you build your website for custom using, give importance in web fonts. Of courses, web fonts can control user’s mode very much for the first time. That’s why today topic is about, How to Add Google Web Fonts to WordPress Properly.
Google Web Fonts: Why Necessary?
While we build a well optimized and eye-catching website, need to careful in fonts. As a result, Google Web Fonts has been playing a good impression. Web designers love it for their default font database with 800+ fonts family. Most of all Google Fonts are playing a vital role to make websites more attractive.
Advantages of Google Web Fonts in WordPress:
While we compare among font family available on the web, we find Google Fonts have won the customer satisfaction. It because of their advantages described below. Here we included some information on premium fonts. Therefore it can give you a chance to get a comparison concept.
Google web fonts are totally free for use:
First of all, Google Web Fonts is totally free for all. Therefore you don’t need to pay for using their web fonts. If you take a look at the other premium fonts like Sofia Pro, they will charge you $250. It’s for using their 12 fonts family only. You’ve to pay $25 if you want to use their only one font. However, a premium font may help you to makes your website more professional. Google Web fonts are performing efficiently likewise premium fonts.
Unlimited Uses:
Of course, there is no limitation to use Google Web Fonts. There is no conditions to use them in all of your websites. Google Fonts can take unlimited pageviews. While similar fonts like Typekit can take 50k page views in a month with premium account. For free they give support for only 25K pageviews.
No License required:
Google web fonts is 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 times.
Google Web Fonts Supports Cross Platform:
If you use other fonts you’ve to worry for cross platform. They may not suit for mobile using or other platform at a time. On the other hand, Google web fonts support multiple devices and all kinds of browsers. For Google’s Dedicated CDN (Content Delivery Network), you don’t need to worry about cross platform anymore.
Faster Loading times:
Google fonts are very lightweight. So no worry about loading times. Google web fonts have the reputation for fast loading time than typekit or other self-hosted fonts family.
How to Find and Select Google Web Fonts:
You can easily find Google web fonts from this link : https://fonts.google.com/
Now follow the below step to select:
- Visit the google web fonts page and choose your desired one. You can increase and decrease the styles and it’ll ensure to choose the right one.
- Now click “Select This Point” from to add the font in your list of selection.
- If you click to your selected fonts from the below, you will see the setting of the font. You can customize the font from this pop-up windows also.
Now from the import menu you can copy the codes for the fonts. Now you can use it for any kinds of website. (Here you’ll find embed code/CSS code. Take the code with your needs)
How to Add Google Web Fonts in Your WordPress Website:
You can add Google Web Fonts in your WordPress website by 3 different ways.
- Adding Google Web Fonts in theme from functions.php file
- Adding in plugin
- Adding from CSS file
- Adding by plugins
1. Adding Google Web Fonts in Theme from functions.php:
First, here is the way for adding Google Web Fonts in your WordPress website. You have to add the following code in function.php. You will find function.php under appearance in your WordPress dashboard (WordPress Dashboard > Appearance > Editor > function.php).
Not only that, you can add this code by cPanel too. By cPanel you’ve to add the mentioned code in the bottom of the page. (However, make sure you’ve kept a blank line in the ending line of the code)
[php]
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’ );
[/php]
[css]
/* CSS */
body {
font-family: ‘Montserrat’, sans-serif;
font-weight: 400;
}
h1,h2,h3,h4,h5,h6 {
font-family: ‘Montserrat’, sans-serif;
font-weight: 700;
}
[/css]
Note: Give the URL link of your desired Google Web Fonts and Font family name
2. Adding Google Web Fonts in Plugin
Second, you can add Google web fonts in your WordPress website with the help of plugins. We’ve made a plugin to make the task easy of adding google web font. Just You’ve to download the Plugin from here. First, install it and then customize this plugin codes with your favorite google web fonts.
3. Adding Google Web Fonts from CSS File
If we not like to use first two methods, we can add Google Web Fonts with this 3rd way. Without changing function.php file we can add Google Web fonts from style.css file.
first, need to open style.css file from Editor (Dashboard > Appearance > Editor > style.css). Then paste the following code that we got in the @import tab :
[css]
@import url(‘//fonts.googleapis.com/css?family=Montserrat:400,700’);
[/css]
We can also combine more than one font requests into one. We can do it like:
[css]
@import url(http://fonts.googleapis.com/css?family= Montserrat|Oswald);
[/css]
Although, This method seems easy but notes that it is not best practice to add Google fonts to a WordPress site.
4. Adding Google Web Fonts by plugins:
Another easy of adding Google web fonts in WordPress site with the help of a variety of plugins. Here is plugin we found as a popular one.
You can check or download the plugin from : https://wordpress.org/plugins/easy-google-fonts/
This plugin is efficient and as well so simple. As a result, you don’t need to edit any code. After installing this plugin, you will find options to choose the font family, color, styles of fonts. You will get the live preview for any changes. Therefore, live preview you can help you to customize fonts quickly. You can create own font controls for your theme too. Moreover, You can manage any CSS Selector with the custom font controls.
Finally, all the methods above are the ways of Adding Google Web Fonts on your WordPress website. Of course, add Google web fonts to WordPress site without any confusion. Truly, using custom Google Web Fonts can increase your website performance with good looking.