Are you too tired to use the same old fonts of WordPress? Want to add some personal touch to your boring WordPress site? Then you can try the Google fonts on your WordPress site. These fonts would fill life to your WordPress site. In this article, I will tell you how to use Google fonts on your WordPress site.
There is a ton of fonts out there that can surely express you better, your brand, your message – Calibri, Chalkboard, Verdana, Monaco. If you want to get all crazy, geeky, sophisticated, and a time-killer, you can surely use code to customize your WordPress blog font. But surely you have easier methods to do that as well.
Why use Google fonts on your site?
The modern web is all about user experience. Companies invest a heavy amount of time and money to ensure that their website’s visitors get the best web experience while browsing through their site.
Text representation also plays an integral part in the website’s aesthetics. It doesn’t matter how good the quality of your content is; if it is not pleasant to read and is too cluttered for the readers, then all your efforts go to waste.
To win through this problem, the easiest way is to get access to hundreds of professional fonts (free of charge) is by using Google Fonts with your WordPress website.
Using a WordPress Plugin for Google fonts
Click Plugins > Add new. Enter the search phrase “Google Fonts” in the search box. Select the first result and click Install Now. Then click on Activate.
On the Plugins page, search Google Fonts Typography and click Settings.
You will land on the Customize screen for your current theme. Click the Google Fonts vertical tab.
Click on Basic settings
You can configure the fonts related to the content of your site here:
- Base typography including all the text elements inside the tag except heading tags, buttons, and the input elements.
- Headings typography
- Buttons and inputs typography
Select a different font from each dropdown and watch how the preview changes. Choose your suitable font combination.
Click the Back arrow and select the Advanced settings. These configuration options refer to other sections of your site.
Select Navigation and change the font family for this page element.
Keep tweaking until you are satisfied. Once completed, click on Publish.
WordPress Plugins for Google fonts
Now, we are going to discuss four plugins that would help you to play with the different aspects of your font like the style, the size, the color, etc.
It is one of the most popular and probably also the coolest of WordPress plugins. The introduction of the Google free font directory was a landmark event in web typography. The Google Directory has tons of mind-blowing fonts to choose from and the directory is growing like gangbusters. Granted font plugins like FontBurner.com did exist, but the font selection for your basic blogger was limited at best.
The WordPress Google Font plugin is more than just a directory of fonts. While the plugin adds the necessary Google code, the user is also able to assign Google fonts to CSS elements of the site from within the WP admin. It enables you to target the Google fonts from the stylesheet of your theme.
It is another one-stop plugin from WordPress. Fontmeister grabs fonts from Font Squirrel, Fontdeck, Google Web Fonts, and Typekit so that you can use them in any WordPress theme.
This is a revolutionary WordPress plugin that helps and allows you to see the changes as you make them. Do you know what makes it cooler? It has no coding involved. You are accustomed to clicking on content, dragging, and dropping. Why should this be any different? The plugin is built to recognize whatever you click on.
Other plugins essentially make you wait to see your changes once you have hit the update button. Seeing the changes as you make them allows you to tweak the look and have a feel of the font. You can see the size and color-changing right away.
You can try out different web fonts in WordPress that can be fun and make you feel like a creative rock star. Typecase is another incredible plugin that enables you to browse, find and select fonts to add to your site from Google Web Fonts.
Play around with all the available fonts. You can be creative or choosy. Pick a font that reflects who you are. It is easy to get caught up in the coolness of fonts. Before you know, you may want to get your hands dirty and tackle customizing your font with specific code and improving your SEO ratings.
Useful Practices of using Google fonts
· Limiting Font Weights: Selecting the complete set of font weights is tempting but it certainly has its drawbacks. For every variant, API gets heavier and takes more time to load the complete set of font weights. This is usually loaded at the start of the web page, and if not optimized, can slow down the initial loading time of your web page.
· Hosting Fonts Locally: Google font is kind of an online library that is hosted elsewhere. Although it has a minimum impact on your site’s performance, however, in the event of unavailability, you would still be able to server the selected Google fonts if hosted locally.
· Accessibility is important: It is not an option anymore to optimize your website for people with vision impairment. Google fonts enable you to style your font the way which is most convenient to this type of visitor.
Best 6 Google fonts to use in your Website
Roboto is one of the most popular Google Fonts. It is a nice mix of professional and friendly font. It has smart and easily readable characters, but still, it has smooth curves. Using this on your WordPress website as the main font will make your content easy on the eye.
Open Sans is another widely used Google Font. However, although the font still has a friendly appearance, it has a somewhat more professional approach.
Balsamiq Sans has a hand-drawn look but it is much cleaner than similar fonts. It has clear spacing, too, so it’s not that distracting.
Poppins is another popular font for websites. Each character is almost mono-linear, meaning its vertical and horizontal strokes have the same visual weight. It’s a good choice for blog posts as it is easily readable.
Raleway is simple yet elegant. It has a sleek and clean look, while also adding some quirks, such as the overlap on the letter “W.” It’s a good choice for the main text, but equally good for titles, too.
Bellota is a simple and clear font that has a little flair added to it. It’s a good pick for general post writing, but it could be used for titles and quotes, too.
So, you have been informed of all the details that you need to use the Google fonts in your websites. You can get other similar articles at Blog – Wpuber.com.