Another important element of web design is typography because users mainly look at it while they read. You can explore it more by not using the default yet boring fonts (like Arial or Times New Roman). Luckily, you can add custom font to your WordPress site!
Where to Find the Right Font
There are plenty of fonts out there that you can use for free. For instance, you may explore Hypefortype, TypeKit, and FontSquirrel that provide you lots of fonts you can download freely to modify your website’s typography. It’s important to choose the right font for your website and check the licensing of the font because some fonts might be premium where you have to buy it first in order to use it.
When downloading the web fonts, you will see a variety of font format. They depend on the browser to use, which are:
- TrueType Font (TTF): This font is compatible with Internet Explorer version 9.0 and above, Chrome from version 4.0, Firefox starting at 3.5, Safari from version 3.1 and Opera from version 10.0.
- OpenType Font (OTF): This font is the evolution of TTF and has the same browser compatibility as TTF.
- Web Open Font Format (WOFF): This font type is supported by Internet Explorer version 9.0 and above, Chrome starting at 5.0, Firefox from version 3.6, Safari from version 5.1 and Opera from version 11.1
- Web Open Font Format 2.0 (WOFF2): It is the next generation of WOFF, but only supported by Chrome version 36.0 and above, Firefox starting at 35.0 and Opera with 26.0
- Embedded OpenType Font (EOT): Only available for Internet Explorer version 6.0 and above
- Scalable Vector Graphics font (SVG): This font type is only compatible with Safari for iOS version 4.1 and below.
I suggest you use the TTF, OTF, or WOFF format as they have more browser compatibility than others.
Adding Font to Your Site
Adding fonts to your computer is pretty easy, but adding custom fonts on your site is a bit more complicated. You have to go to your cpanel, admin panel and making changes in theme files functions.php and style.css or adding custom CSS of your own. While on computers you can simply download the font file to fonts directory.
Thankfully, WordPress always simplify our work with its plugins. The plugin I recommend you to add custom font is Use Any Font. Here are the steps:
1. Download font file you want to add on your site. Note that the font format you can download are TTF, OTF, and WOFF. For example, I download a TTF font.
2. Install Use Any Font plugin on your WordPress. You can also navigate to Plugins > Add New on your WordPress dashboard, then search for Use Any Font. Install and activate it.
3. Create API Key to start using the plugin. You can create the API Key here by entering your name, email, and your donation. You can choose 0$ if you want to use it for free.
4. After clicking Submit button, you will get your API Key. Copy the API Key.
5. From your WordPress dashboard, navigate to Use Any Font main menu. Enter your API Key in the available box, then hit Verify button.
6. On the same page, click Add Fonts button on Upload Fonts Field to upload your custom font.
7. Enter the font name and browse for your font file. Click Upload.
8. From Assign Font Field, you can set the font to the element that you want after clicking Assign Font. Select the font first then choose which element you want the font for. For instance, if you want to use the custom font for h1, simply check h1. Click Assign Font button once again.
9. Done! Your site has the fresh font to show.
Adding custom fonts to WordPress is that easy and quick!
Custom fonts can make a huge difference to your website as they can make your content to shine even more. But you have to remember to use no more than 2-3 custom fonts on your site at a time. Too many custom fonts can slower the load time which can be a bad user experience. That’s why you should choose your font wisely.
Which font are you using on your website now?