Details that appear insignificant, such as the font of your text, could build or kill how people view your brand.
People are drawn to appealing things. They love things that make work easier. The same applies to websites. Even without getting to the quality of the content, a pretty website that is easy to scan and read will draw more traffic than a dull and complex one.
So, creating insightful content is not enough. You need to package it attractively on a well-designed website. It means you must find the right color combinations, images, and typography.
Typography is the visual aspect of a written word. It is an art of arranging letters by paying attention to the typeface, line-length, and spacing so that the text appears readable and appealing.
Typography plays a huge role in website presentation. And going the extra mile to use custom fonts adds some uniqueness to your website. In this article, we will show you how to add custom fonts to your WordPress website to keep your audience hooked.
We will guide you through the reasons why you need to use custom fonts and the best sources in the market.
Quick Navigation
- Adding Custom Fonts to WordPress Site
- How to Add Custom Fonts to WordPress Using Plugins
- How to Add Custom Fonts to WordPress Manually
- Why We Use Custom Fonts in our WordPress Site
- Where can you find Popular Custom Fonts
- Conclusion
Let’s go:
Adding Custom Fonts to WordPress Site
There are two main ways to enhance the appearance of your website using customized fonts:
- Using a plugin
- Adding manually
Let’s break these down:
How to Add Custom Fonts to WordPress Using Plugins
Here are four great plugins you can use:
1. Easy Google Font Plugin
In your WordPress dashboard, go to Plugins. Click on Add New to add a plugin.
Search for Easy Google Font on the search box at the top.
Click install and activate it.
Next, we need to change the settings. On your dashboard, click on Appearance, go to Customize, select Typography, then click on Default Typography.
Choose the font and font-weight you would want for your body and headings. Click on appearance and edit the font size, line height, and letter spacing to your preference.
Click Publish to save your settings.
2. Custom Adobe Fonts (Typekit) for WordPress Plugin
This is another great resource for custom fonts.
In this case, you will need to create an account and go through the various fonts they offer. Some fonts are free, while you will have to pay for others. Make your choice and activate it.
- Go to the WordPress dashboard. Click on Plugins, and as usual, select Add New.
- Search for Typekit Fonts for WordPress. Click install and activate.
- Go back to adobe fonts and copy the project ID from your recent kit.
Go to Settings on your dashboard, select Custom Adobe Fonts (Typekit). On the Typekit Kit ID box, paste the copied ID and save the settings.
To choose where and how you would want your custom font to appear, click on Appearance on your dashboard, select Customize, and add the custom CSS to your site.
3. Use Any Font Plugin
Explore the options on the Use Any Font plugin. Go to your dashboard, select Plugin, then Add New.
Search for Use Any Font plugin. Install and activate it.
Go to settings, select the just installed Use Any Font plugin. And add the API key. You can get the API for as little as $10 from the website.
Now, download your font.
Click on add fonts, type the name of your selected font, and upload it from your computer.
Click assign font and select the font you have just uploaded. Assign the font to various elements of your content, such as headings and paragraphs. You can also assign the font to your menu in the custom elements box and click on Assign Font.
Check out this video for visual guidance.
4. OMGF | Google Fonts to WordPress
OMGF promises to download your Google Fonts to your WordPress content folder in just two clicks. Install and activate the OMGF plugin in WordPress by going to Dashboard, Plugin, and Add New.
You can then configure it from the Settings page.
Alternatively, you can:
- Download OMGF from its plugin page
- Upload it to this directory /wp-content/plugins/
- Activate it through your WordPress dashboard at the Plugins section
- Configure it through Settings > Optimize Webfonts
These methods will help you add custom fonts using plugins. Here’s a handy video that shows it all in action.
How to Add Custom Fonts to WordPress Manually
Let’s look at four ways to add custom fonts to your WordPress website manually.
1. Using CSS3 @font-face
Use a Webfont generator to transform your font into a web format. Download the files to your computer and upload them to WordPress in the child theme’s directory using FTP or cPanel file manager.
For your font to appear in the theme’s stylesheet, load it using the CSS3 @font-face as follows
@font-face {
font-family: Fontname;
src: url(http://www.yoursite.com/
wp-content/themes/your-theme/fonts/Fontname.ttf);
font-weight: normal;
}Use the correct font name and the URL to your website.
You can use the font in any other CSS using the following rule
.h1 site-title {
font-family: Fontname;
}With these codes, your new font will be visible on your site.
2. Using @import
This is where you import a CSS code from the font provider. It makes it possible to load the font into the WordPress website from the style sheet.
Let’s use the example of Google Fonts. Select the pair of fonts you would like to use for your content’s headers and body.
Select the fonts by clicking on the + sign beside them. A tab at the bottom of the website will indicate “2 families selected.” Click on it.
Select the Import tab, and you will find a CSS code. Highlight and copy the code.
Paste the code as it is in your website’s header, and you will be on your way to making a superb website.
3. Editing Your Theme Files
Let’s see how you can add Custom Fonts to WordPress manually by editing your theme files. In this case, we will use Google fonts as our source.
Search for the fonts of your choice. You will need two fonts, one for the headings and another for the body. For instance, you can choose Noto Sans and pair it with Open Sans.
Click the tab showing the fonts you have selected at the bottom of the page. Highlight the embed code under Standard, right-click it, and copy.
Go to WordPress and paste it in your child’s theme header.php file under the <head> tag.
4) Upload Fonts Via FTP
This method involves uploading font files to the WordPress website directly and using your own hosting. You do not have to rely on other servers such as Adobe. But you will need to transform the font into web form format such as OTF, SVG, TTF, EOT, WOFF.
Use an FTP manager such as Filezilla to upload to your website and store it in a font folder. With the fonts with you, all you will need is to use a front-face code on your CSS to apply the fonts on your themes.
Why We Use Custom Fonts in our WordPress Site
It Reduces Bounce Rate and Increases Conversion Rate
Internet users have a short attention span. And if they have to struggle to read the text on your website, they are unlikely to spend more than a few seconds in it. You need to catch their attention.
With a wide variety of custom fonts, you can choose a size that makes your text easy to scan, and one that keeps your readers interested. Use excellent color combinations, play around with unique but professional fonts, and let your visitor enjoy your site as they learn.
It Makes the Website Stand Out
Aesthetic appeal is not the only factor that determines the success of a website, but it sure gives it a competitive edge over rival sites. Picture this, if you and your rival show up on the top page of a SERP, offering the same products and services, what would make the customer buy from you and not your rival? A more readable and navigable website.
A great design also gives personality to your website. And when people can associate the features of your website with your company’s culture and warmth, they develop trust. Using custom fonts makes it possible to match your website to the brand’s image.
It Helps Us Keep Up with the Trends
Fonts have been evolving, with new shapes and designs coming up. What was considered a professional font in the 60s might appear outdated when used today. And as market researchers understand consumers better, more designs are being innovated.
Although traditionally styled fonts will give your site a classic look, it may give the impression of a brand that cannot meet modern needs. And no entrepreneur wants that.
Custom Fonts Enhance the Website’s Performance
If you thought that fonts do not affect a website’s performance, you can’t be any more wrong. Typography can enhance or drag down a website’s performance.
The choice to use custom fonts from separate servers such as Google Fonts and Adobe reduces the byte size of fonts that must be stored on a website, enhancing speed.
First Impressions Matter
First impressions can make or break a business-client relationship before it even begins. Just as we are keen on having the right front-office personnel, we are careful to create a great first impression with our online customers using a beautifully designed website.
Use custom fonts to optimize your website’s appearance so that it portrays professionalism, trustworthiness, and reliability.
Where can you find Popular Custom Fonts?
Google Fonts
Google Fonts is home to 977 font families in a variety of over 25 languages. It is an easy to use platform with each font extensively described by the experts who design them.
If you are unsure of the way to pair your fonts, there are suggestions based on the popularity of the fonts. And the best part is that Google fonts are free.
Adobe Fonts
With Adobe fonts, you get access to world-class fonts. All you need is a Creative Cloud subscription. The subscription opens the door to over 1600 unique fonts. But you can still access 196 font families without paying for Creative Cloud.
Adobe fonts also provide additional essential features such as the ability to embed your web projects as well as font packs for infographics and business or personal occasions.
Myfonts.com
Browse a variety of more than 100,000 fonts and over 900 free fonts on Myfonts.com. This excellent platform releases new font designs daily, including web fonts. With Myfonts.com, you have no reason to have a boring website.
As much as a wide selection is excellent, it can be overwhelming. Myfonts.com provides the option to try out the various fonts on the website using sample text and pangrams. You can test various aspects, such as the appearance of the font in various widths.
Fonts.com
Fonts.com is a platform for creative font designers to showcase their work and interested buyers to purchase and download. They are also an excellent source of typographic tips and techniques.
You can browse the best deals, learn about innovations in the world of fonts, and get designs from top-rated corporations and creative professionals.
Conclusion
Investing in a good source of custom fonts is essential for every business. It makes your website readable, attractive, and capable of holding the visitor’s interest. No matter how good your company’s SEO and keyword optimization is, it does not help if customers have one look at your website and are gone.
Invest in the right source of customized font. This does not mean that WordPress does not provide adequate fonts. It does. But third-party vendors will provide some unique and attractive features.
Now you know how to add custom fonts to WordPress by use of plugins and uploading the fonts manually. You do not need an expensive programmer to go about it. Download the right version and follow the instructions. Choose a font that suits your industry, but you don’t have to work with the design everyone else is using. Try something unique
One word of advice – if you are not sure of the technicalities such as adding code to CSS, leave it to an expert.
Read Other WordPress Guides:
Leave a Reply