Many WordPress themes offer the options to customize fonts on the website. However, several other themes lack this feature. Website typography plays a significant role for your site’s UX. Typography improves reading comprehension and retains the readers for long periods of time. The truth is typography, on the subconscious level, determines the mood of readers.
Gone are the days, when Times New Roman, Georgia, etc. were the only fonts considered for site text. Over the past few years, the typography space has been completely transformed with the arrival of Google Fonts, Typekit, and several others.
Today, there are hundreds of free fonts, tutorials, and resources available on the web about typography. Unlike Adobe Illustrator, Photoshop, and other desktop applications, WordPress does not give you complete control over your typefaces. While themes are capable of packaging custom fonts with them, most themes do not.
Therefore, in this post, you will learn about how to find suitable custom fonts and how to use them in your WordPress site.
Importance of Using Custom Fonts
Before I jump on to more technical things, you need to identify what's the inspiration behind typography?
By definition, it is the art of designing and customizing the way our type (text) reads.
What's the point of changing fonts, word space, line space, letter spacing or the font weight, you might ask? After all, some studies prove typography improves reading comprehension, others disagree.
You don't need to go to an art school to know that typography makes a big difference. Everyone judges contents of a web page by its typography on a conscious and subliminal level.
Typography is ubiquitous, and it influences readers even when they are oblivious to it. To discard typography is to discard art and design itself! It makes or breaks a reader's mood. A typeface either eases the reading fatigue or causes readers to abandon the page completely.
All web browsers come with a set of default fonts. This means if a font is not specified in CSS of a page, then the default font will be used. While you can always use default fonts, they make for a dull user experience. This is why it is extremely important that you use a custom font. If your theme does not provide you options to change fonts, there are several plugins that can help.
How to Find Custom Fonts in WordPress?
There are many places to find beautiful fonts. There are tens of thousands of fonts available on the web. Some are free for personal usage but need a license for commercial use. Others like Google Fonts and Adobe Edge Fonts are completely free. Here are a few other resources to find free web fonts:
- Google Fonts: This is one of the most popular free fonts resources on the web. There are more than 500 fonts available for personal and commercial usage. Use Font Pair to match Google fonts.
- Font Squirrel: Font Squirrel is one of the biggest names in typography industry. Unlike Google Fonts, not all fonts on Font Squirrel are for commercial use. So, before using any of the fonts from this site, read its license.
- Adobe Edge Web Fonts: Adobe Edge Web Fonts provides you access to a large library of fonts. Powered by Typekit, a commercial font providing service by Adobe, it ensures same speed and stability as Typekit.
There are so many beautiful fonts that it may be tempting to choose many of them. But, do not do that. Always use not more than 2 fonts throughout your website. It brings a consistent look to your website.
Now that you have chosen a suitable font for your website let's learn how to add it to your website.
Adding Custom Fonts to WordPress
There are two ways of adding fonts to a WordPress website:
- Manual: In this method, the downloaded font is uploaded to the site and referenced via CSS styling.
- Plugins: Here, free WordPress plugins are used to facilitate the process.
In this post, we will explore a few WordPress plugins that let you upload custom fonts.
Characteristics of a Custom Font Plugin
Open source softwares have the benefit of a willing community, which is always looking to contribute. WordPress has this advantage as well. Several WordPress plugins allow you to add custom fonts. So when there are so many plugins, how do you choose the right one? What are the characteristics of a custom font plugin?
Here are a few points to take into consideration:
- The ability you use a custom font.
- Ability to use more than 1 font.
- Target specific headlines and elements.
- BONUS: The ability to change font settings from visual editor.
That is all. The first characteristic on the list is very important. Because you can always download fonts from sites like DaFont, Font Squirrel, etc., you should be able to upload these fonts to the WordPress website. It is important that the font you use if made for the web and you have the permission to use it.
WordPress Plugins to Upload Custom Fonts
There are many WordPress plugins for customizing typography and uploading fonts to WordPress. The rest of this post explores several such plugins.
Use Any Font
Use Any Font is a WordPress plugin that gives you a user-friendly interface to upload fonts and use them directly through the visual editor. By default, WordPress visual editor has no option to change the font of any text. But this plugin has several features to offer which makes the process of adding custom fonts a lot easy.
- Plugin Setup: Once you've installed & activated the Use Any Font plugin, two new drop-down menus are added to the visual editor. Just highlight the text, select the font from the drop-down menu or change font size, you can do both.
- Styling: This is especially a useful plugin for people with no knowledge of CSS. Use Any Font supports several font formats including ttf, otf, and woff.
- Interface Uploader: It uses its interface uploader to convert your fonts and then stores the font files on your server, which makes for a faster website.
- Target Text Elements: Aside from being able to upload fonts, you can also use the plugin to target any headings, or paragraphs and change their font family.
There are a few disadvantages as well. To use the plugin, you need an API key. You can get the API key for free from this website. But the free API limits you to only upload one custom font. To be able to add more custom fonts, you need to purchase their premium API key.
Another drawback is that the plugin does not support Google Fonts.
Font is a creative solution to changing font, font size and customizing other aspects of typography of a site. You can customize any heading, paragraph of textual part of your site in real-time directly from front-end. The plugin boasts several features like:
- Setup: Once you activated the Font plugin, go to your site and use admin bar to utilize various features of this plugin. In a way, this plugin works a lot like Adobe Photoshop. You select an element from frontend, customize its font, font size and color directly through admin bar. What about fonts? You can most definitely use the free fonts extracted from FontsForWeb.com.
- Font Styling: There are many other features to the plugin. For those hesitant to use CSS, this plugin serves many styling related features with ease.
Pro Version: There is also a premium version of the plugin available which offer features like:
- You can rotate any text.
- You can customize text's opacity.
- Add custom rounded backgrounds.
- Apply a shadow effect to text.
Unfortunately, there is no way to upload custom font or support for Google Fonts.
Typekit Fonts for WordPress
Typekit is a premium subscription-based service which allows you to select high-quality fonts from a range of thousands of fonts. You can subscribe to Typekit and get awesome fonts for your WordPress site. These fonts are font-face applicable, and they are fully licensed and accessible. Typekit Fonts for WordPress is the plugin you need to embed Typekit fonts in your WordPress site.
- Plugin Setup: Once you have installed & activated the plugin, you need to select the fonts from Typekit account and publish them. You need to get the embed code of published fonts. You can add this code to the plugin's settings.
- Custom CSS: You can also define your own custom CSS rules to target headings, paragraphs or any other text to use Typekit fonts.
WP Google Fonts
WP Google Fonts allows you to take advantage of Google Fonts directory. One of the amazing developments in typography industry is the addition of Google Fonts.
- Extended Font Library: It is an awesome library of free fonts, which is steadily growing and web designers use it quite often in their projects.
- Usage: To use this free service, you need to link its fonts through theme's <head> section and then use CSS to use the font itself. For beginners, the manual method can be pretty confusing.
Fear not, WP Google Fonts comes to the rescue. This plugin does not only add necessary files, but it also enables you to target specific textual elements. Just install and activate this plugin, go to its settings. From there, you can select from all the library of free Google fonts and specify which headline gets which font. The user interface makes things pretty easy for newbies.
What is the first thing visitors see upon sending on your website? It is the site design! A big part of design is based on the proper use of beautiful fonts! So you must take care of your website's typography. Use one of the plugins mentioned above to integrate versatile font styles.
Make sure you do not include more than two fonts. As in the more custom fonts, you add to your site, the slower your site speed becomes.Have you made an effort to incorporate good typography on your website? Tell me about it.
Finally, you can catch all of my articles on my profile page, and you can follow me or reach out at Twitter @mrahmadawais; to discuss this article. As usual, don’t hesitate to leave any questions or comments below, and I’ll aim to respond to each of them.