Your content is the showcase of your knowledge and experience. The time-tested truth, ‘Content is King’, makes the presentation of your content all the more important. One of the crucial things to remember while decorating your content is to choose the right font and typography. Fonts play a major role in the beautification and readability of your content.
For years, Google has provided a huge number of web based fonts for the users. You can use these fonts to add both good looks and usability to the website. Google Fonts could be integrated in several ways such as manually adding them via code or use WordPress plugins to implement Fonts. In this article I will show you how you can implement Google Fonts in both these ways.
Adding Fonts to your Website Manually
Before continuing further, you must finalize the font you are going to use. At the end of this blog, I have shared some really awesome free and paid resources that will help you make your content look great.
Step 1 – Choose a Font
Select your desired font from Google Fonts.
Step 2 – Integrate the Font
Click on the + button. You will see the notification panel appear at the bottom, where you will see two ways of integrating Google Fonts.
The two ways are:
- Standard (fast and recommended)
- Import (easy but not fast)
Step 3 – Implementation Using Both Methods
- Standard (fast and recommended)
This is the best and fastest way of integrating Google fonts on your website.
Copy the link and add the URL In the header.php file.
If you wish to use more than one font, choose another one and click its plus button. It will be added to your selected family font.
Now let’s add these chosen fonts to your website. Go to the header.php file and paste the fonts link code below.
<link href=”https://fonts.googleapis.com/css?family=Baloo+Da” rel=”stylesheet”>
After placing the code in header.php file, include the following code in your theme CSS file.
Below is an example of adding the font to all H1 tag of the website
h1 { font-family: ‘Baloo Da’, cursive; }
Result :
- Import (Easy but slow)
The process of using the Import option to add fonts is exactly similar to the Standard method. You need to add codes in header.php file but this time we’ll be adding <style> tag
<style> @import ‘https://fonts.googleapis.com/css?family=Baloo+Da‘; </style>
For multiple fonts, simply use | (pipe) or just click on plus icon on Google Fonts website and it will do the job for you.
Now, don’t forget to define the font in style sheet. This is as important as defining the style tag on header.php file.
This is super easy but not quite fast because using @import will block parallel downloads. Thus, the browser will not download any other content until it finishes downloading @import data. If you are stuck with the @import method, a better approach is to combine multiple requests in one import.
Useful Font Resources:
Here is a list of useful fonts and WordPress plugins that greatly reduce the headache of choosing and integrating fonts in your website.
Google Fonts (Free)
Google has one of the largest and best Font collections. And the best part is that, they are all FREE, under Open Source License. You can find more info about Google Fonts on their Google Font official page.
Typekit (Paid)
Typekit, by Adobe, has a huge collection of fonts. Typekit has an amazing library of professional fonts to make your web content look great. You can purchase Typekit subscription in $49.99/year and if you are Creative Cloud member, you can access these fonts from there as well.
Font Squirrel (Free)
This is one of the best Font libraries that I recommend. Their awesome font collection has hundreds of fonts that can be used freely in any personal or commercial project.
Typecast (Free & Paid)
Typecast is another huge library of Fonts with both free and paid services. You can use over 600 fonts with the free account. It allows a preview in the browser where you could check the readability and looks of the fonts.
What The Font
This is an excellent font recognition resource. If you want to know what font is used in any image, you can upload the image or provide its link. The website will help you identify the font for you.
These are some resources where you can choose awesome fonts for your website. Now let’s check out some WordPress plugins that are helpful as well.
Plugins for Fonts
When it comes to font implementation, I recommend the following plugins.
If you want to use Google Fonts, this is the plugin for you. You can create your own style sheets and customize all style sheets as well.
As the name suggests, it helps the beginners setup fonts for their websites without the need of code. You can choose, optimize, give unique colors and styles and view live preview.
