Everyone with a WordPress site wants to have a unique great looking site, and people opinion say that websites are an extension of the creator’s personality. To create a good looking website, you need to have nice fonts (besides code).
In this article, steps on how to add Google font to your WordPress site is covered.
Overview
People don’t want to be stuck with the standard option provided by WordPress. Google fonts make this an easy to do the subject. Google Fonts is a web service that was introduced in 2010 to provide access to free typography. The plugin is ideal for those who want to stick to their theme, but want to change the typography without any coding.
How To Add Google Fonts to WP Site
Searching for Font
Navigate to the Google font’s page and choose the font which is to your liking. Google has made it easier to search, at the top right corner; you could click the search icon and search by type or name if you know the exact font you want. You can also filter fonts by category, trend or popularity. As if that isn’t enough, you can also search for fonts by style.
Preview the selected font by clicking the select this font button to select it. In the article, I am going for Tajawal.
Your new font appears in a minimised menu at the bottom of the page.
Click the bottom bar to open the chosen font, you can download it, share it, or you can copy the code to input on your WordPress site.
To customise a style; Click on customise.
Check any styles and languages you need for your font. Remember, that the more languages you add, the more time it takes to load the page and thus the more your site is likely to be slow.
Google tells you the approximate loading time at the top of the page.
Embedding the Fonts in WordPress
Insert the fonts via a WordPress function. With the wp_enqueue_style direct WordPress to add a font to the header section of every web page. The function keeps CSS files from being loaded more than once. The requirement for the method to work is the link to the fonts on Google’s server. The link without all the other stuff around it is;
https://fonts.googleapis.com/css?family=Tajawal
Add the below code to make sure it loads correctly.
functions.php file of our theme.
function custom_add_google_fonts() {
wp_enqueue_style( 'custom-google-fonts', https://fonts.googleapis.com/css?family=Tajawal', false );
}
add_action( 'wp_enqueue_scripts', 'custom_add_google_fonts' );Save the file and upload it. Remember to replace the link with yours. When you reload your WordPress site, your font looks interesting.
Use Google Plugin in WordPress.
Many plugins help to add fonts to a website such as Typecase Web Fonts, Supreme Google Web fonts, Google Web Fonts Manager including Google fonts. Below are the two favourite plugins that help to add Google fonts to WordPress Website.
WP Google Fonts
It adds a significant code to the website and also helps to add fonts from the Google Fonts directory in the following two ways –
- Users can assign Google fonts within their admin panel to specific CSS elements of their website.
- Alternatively, one can work from within the stylesheet of their theme.
Navigate to Plugins. Add New. Search for WP Google fonts. Click Install Now.
Click Activate to enable Plugin.
From Active Plugin window. Look for WP Google Fonts and Click Settings.
Select the fonts required for your site then Click Save all.
The user may preview fonts before saving or customise by checking options on the settings page. The plugin can save at least six settings and assign them to different tags which are updated after adding fonts to Google font library.
Easy Google Font
The plugin allows the user to create customised fonts for their website and preview before deciding on the font to choose and also integrating with the WordPress Customizer. Font’s aspects can be customised based on weight, colour, spacing, and size. It ensures addition of all the stylesheets for the fonts upon choosing google fonts.
Navigate to Plugins. Add New Plugin. Search for Easy Google Font. Click Install Now
Click Activate to enable the plugin.
Click on Settings to display the details.
Create a New Font Control. Type the Name. On the Add CSS Selectors, indicate where the fonts will be used.
To customize the font control, Click on Customizer
Conclusion
Now your site can call google fonts. With that simple procedure, your site looks so much better and unique. A significant advantage of this plugin is that you can update your theme without losing the Google font since it does not require editing in the theme stylesheet.
Check out these top 3 WordPress hosting services:
- Check out our recommendations for the best wordpress web hosting.
