Fonts are an important part of the website you are planning to design. You will see that WordPress websites have limited, or default fonts present for you to choose from. At times, themes have only one set of fonts that you cannot shy away from. At such times, you would want to have a way to install your own fonts to the website you are creating using WordPress and you can do so with the help of Google Fonts.
It is obvious, your website’s visuals are important to you. You want to ensure that your website is classy, elegant, and promising to the audiences and fonts play an important role in that. How will you get interesting and imagery fonts to your website?
Google fonts are classy, and provide you with a variety. Right from Comic Sans to other numerous fonts, you get everything with your Google fonts. So, all you need to do is install Google fonts to your website. How would you do that? Here are some ways to get Google Fonts to your WordPress website.
Google Fonts: An Introduction
Let us begin by understanding the various Google fonts that are available and the characteristics that they come with.
The fonts that you get with Google fonts include categories like Serif, Sans Serif, Display, Handwriting and Monospace. The characteristics offered by these fonts include thickness, slant and width. The different scripts offered by this category of fonts include Cyrillic, Cyrillic Extended, Devanagari, Greek, Greek Extended, Khmer, Latin, Latin Extended and Vietnamese.
Here are the various options using which you can include Google fonts on your website.
Method 1: Installing Google Fonts Plugins
One of the simplest ways of getting anything aboard your WordPress website is to install the necessary plugin. You just need to install one of the various Google fonts’ plugins that are available with WordPress. With WordPress plugins you just need to install, activate and choose the fonts you want to use for the website.
There are some obvious limitations available with WordPress Google fonts’ plugins. Let’s say you want to have a default specific font on the website you are designing. You cannot make that choice using the plugin you installed without making the necessary changes in HTML and CSS coding. This simply means if you want to make some changes beyond what is available in the Google fonts plugin in WordPress, you will need to work it out in the HTML and CSS codes. This means you will need to customize to make sure your website understands what fonts to look out for.
Options available for Google Fonts plugin are as follows.
WP Google Fonts
By installing this plugin to your website, you can easily integrate and install the fonts from the directory to your website. You can build your own stylesheet or you can customize CSS styles to match your theme. You just need to perform this using your admin credentials or you can perform this using CSS stylesheet. If you wish to get Google fonts on your website as quickly as possible, then you need to perform this task.
Easy Google Fonts
This is another quick to install plugin available for installing Google fonts to your website. Here you won’t need to perform any coding on HTML or CSS to get the codes on your website. Isn’t that interesting? You can choose one of the many fonts available, just change the size and colors available and get a live preview. Customize the typography of your website to match the installation.
Method 2: Modify the Code
Google fonts come with a style sheet of their own that you can install and make your fonts dynamic enough. These stylesheets come with a basic instruction manual that you can use to see how to perform this installation.
There is a certain hitch and cure for this. While this instruction manual works perfectly for both static and HTML sites, it really does not prove to be dynamic for WordPress based websites. Does that worry you? Well, here is a way in which you can turn around the events, and modify the code and make the style sheet available dynamically for WordPress. Unlike HTML, you don’t need copy paste over and over again for WordPress. You can simply automate the procedure of pasting the style sheets for WordPress. Here’s how you perform that.
Coding Method
You will need the style sheet link. So, open Google fonts, search for a particular font’s style sheet. You will need to “Add to Collection” the particular font you have selected. You need to make sure you have selected the right weight and type of Google font so that your website speed is not interrupted in the process. Make sure you know how to vary the weight and type of the fonts available on the website.
Thumb rule says do not select more than 3 fonts for a particular website. This will help boost the website speed. Once you are done with selecting the weight and type of the font you are selecting, here’s what you will need to do.
- Copy this code line
This code is for Open Sans font type. You will find similar codes for the other fonts too.
- This is the first line of the code that you need to copy. Make sure you have done that without any issue.
- Open your WordPress site, and go to your theme. Go to WP content>Themes>Yourtheme. Make sure you open the site in a code editor to perform this task
- Search for a file named functions.php. Go to the bottom of this function, and add the code you just copied there
- Add the following function somewhere around the code you have just added
wp_register_style(‘et-googleFonts’, ‘http://fonts.googleapis.com/css?family=Open+Sans:300 italic,400 italic,700 italic,400,700,300’);
wp_enqueue_style( ‘et-googleFonts’);
}
add_action(‘wp_print_styles’, ‘load_fonts’);
- With this code, you are installing the code to the master code, and thus preventing any process of copy paste involved
- Once you are done copying and pasting this file, you will need to save this file and move to the main stylesheet CSS file. Here is where you will include the typography for the new font. Before that you will need to declare family for the existing CSS.
- Use this code:
- Save this CSS file and now go back to the main website. Check if the website has been updated
- The link will contain some embedded and pre configured styles from stylesheet to be included in the font
- You can use this method for any of the fonts included by Google fonts
font-family: ‘Open Sans’, sans-serif;
font-size: 16px;
color: #000000;
}
If you don’t want to use the coding or plugin method, the third simplest way to tackle the situation is to choose WordPress themes that contain the necessary Google fonts. You won’t have to work too hard in this case. There are a lot of themes of such types already available.
So, try these methods of installing Google fonts and get a visually appealing website.
About Author
Juned Ghanchi is a consultant at a leading mobile app developer company IndianAppDevelopers in India, he is specialize in developing creative wearable and iBeacon mobile applications.
You must be logged in to post a comment.