Typography plays a significant role in making your WordPress website stand out.
In WordPress, font options are limited and dependent on the theme. However, you can always add custom fonts to your site.
For this, you can either use plugins or add custom fonts manually. You are probably unsure of why you need to add custom fonts and how to add them. If so, continue reading to find out more.
Why Use Custom Fonts?
The typography of a website plays a significant role in the user experience. Good typography on a website can increase readability and add value to a website by complementing the design.
Usually, a WordPress site offers limited options for fonts. But, there are thousands of custom fonts that you can find and use without any hassle. Remember, while choosing a font, always look for the one that can perfectly blend with other fonts you’ve used on your website.
While looking for a font, always choose the responsive one. Why? Because you’ll be receiving visitors from all over the world. These visitors can browse your site with devices, like PCs, to mobile phones. So, it is essential to have a font that works great on all devices.
Gone are the days when almost all the web contents had the same standard font style. Today, every other website has its custom font as an integral part of branding. Likewise, you can choose to use any font that suits your style. Over time, users will begin associating the font with your brand and website.
Where to Download Fonts for a WordPress site?
Downloading fonts is easy. You can simply type the font’s name and search. You’ll find plenty of repositories with hundreds if not, thousands of font options.
Some of the popular repositories include Google Fonts, Adobe fonts, fonts.com, Typekit, and FontSquirrel. Google Fonts is one of the biggest repositories of web fonts with more than 600+ fonts. Most of the repositories mentioned above are affordable and easily accessible. Choose a couple of them to use for your website.
While choosing the font to use on your website, do not use more than two fonts. This is to maintain consistency across the website and to optimize its speed. The more fonts you use, the longer it takes to load your website.
While choosing the fonts, mix and match them using tools, like Font Pair. This tool helps you find the right fonts that fit together for your website.
Convert Fonts to Readable Web-Formats
Web fonts are available in many different formats. They are compatible with different browsers. However, even if your font is incompatible, you can make it workable by directly converting it to a compatible format.
Here’s a shortlist of different types of fonts based on their compatibility.
Open Type Fonts(OTF): OTF fonts are a registered trademark of Microsoft that works excellent with all major browsers. It is the most commonly used format.
True Type Fonts(TTF): This font is a widely used font for Windows and macOS.
Web Open Font Format(WOFF): This is a font format for web pages recommended by the World Wide Web Consortium(W3C).
Embedded OpenType Fonts(EOF): It is a compact OTF font supported by all major browsers.
Whenever your browser does not support the format, you can use the Web Font Generator to convert it to a web-friendly format. It converts the resulting font to WOFF and WOFF 2.0 format.
How to Add Custom Fonts to WordPress?
There are two ways of adding custom fonts to WordPress. It is either by using plugins or doing it manually.
Using Plugins
What’s best about WordPress is that it makes your job easy with its plugins designed for almost anything. For using web fonts, there are plenty of plugins available. Among these, we have chosen the best three plugins based on user reviews.
1. Google Fonts
Google fonts for WordPress is a widely popular plugin that allows you to use fonts from its extensive library of 600+ fonts. With Google Fonts, you can apply unique fonts for particular CSS elements to enhance user experience.
To use the Google fonts plugin, follow the steps below:
- Go to WordPress plugin directory and install the Google Font plugin.
- Open Google Font Control Panel via WordPress dashboard.
- Here you can choose the font and adjust settings like font style, assigned elements, etc.
Features
- Live Customizer preview
- 900+ fonts to choose from
- Compatible with any WordPress theme
- SEO-friendly
- Efficient font loading with a single request
- Size, weight, line height, color, and other font settings
- Tested for PHP7
2. Typekit
Typekit is another excellent free resource from Adobe Fonts. It is available in both paid and free versions. With a Creative Cloud subscription, you get to use all 1000+ fonts for your website.
For accessing the fonts, you need to follow the following steps:
- Log in to the Adobe Fonts account.
- In the window, click on the </> button.
- You’ll see a code snippet which you’ll need to copy and paste inside your website’s head section.
That’s it; you can now use the Typekit font you just selected in your WordPress website. It is very easy to set up and use the Typekit fonts.
Features
- Easy to use
- Unlimited font options
- Optimized for speed
- No Sync limits
- Fonts are usable both online as well as offline.
3. WP Custom Fonts
Unlike others, WP Custom Fonts allow you to use custom font files from anywhere. It is not limited to a single repository and is flexible. Currently, it supports Astra, Beaver Builder theme and plugin, and Elementor Page Builder. If you happen to use some other theme, you can write a custom CSS to use the fonts.
Here’s how you can use it simply:
- Install the plugin.
- For compatibility, upload font files in multiple formats.
- You can see the font added in the settings of Astra/ Beaver Builder/ Elementor.
Install Custom Fonts Manually
Plugins may not always be the alternative for adding custom fonts to your website. Especially if your website is slow, plugins can make it even slower and increase your website’s loading time. This can cause a loss of your website traffic.
To avoid such a situation, you can instead use custom fonts manually for your website. For this, you only need to upload the font to your hosting account and edit your theme’s CSS files.
Here are the steps to follow:
- Download the font you want to use. If it is a .zip archive file, extract it.
- Upload the downloaded font to wp-content/themes/your-theme/fonts directory. If you do not have the fonts folder already, create one.
- Log in to the WordPress admin Dashboard area.
- Go to Appearance > Theme Editor. Access the style.css file and add at the following code:
<p>@font-face { </p>
font-family: Aguafina Script-Regular;
src:url(http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);
font-weight: normal;
}- Change the font family and URL values accordingly.
- Hit the “Update” button and save changes.
- Now the font is saved but still not applied to any element.
- To apply the font in any element, edit the style.css file. For example:
.site-title {
font-family: "Aguafina Script-Regular", Arial, sans-serif;
} Here, the font is applied to the site-title element.
That’s it. It is easy to add custom fonts manually, too, just like using plugins. It depends on you and your website on which method to use. Choose as per your needs.
Conclusion
Depending on a different context, you can use either of the methods to add custom themes to your website. We hope you found our article helpful. We also recommend you to check How to change the Font size in WordPress? Please let us know your experiences in the comments below.
