How to Add Fonts to WordPress – 10 Guide and Trendy Design Examples - Blog of Web Design, Marketing, Social Media, Search.

How to Add Fonts to WordPress – 10 Guide and Trendy Design Examples

How to Choose the Font
Top Methods of How to Add Fonts to WordPress?
WordPress Change Font Size
What Fonts Are Trendy in 2020?
Our Final Thoughts

Many people underestimate the impact text styles can have on the general appearance of the website design. The typeface you choose has significant value because it creates the first impression of your project. If you want to stand out from the crown, every small detail matters. Fonts compliment your page's public image and contribute to creating a certain character and mood for your project. Suppose you plan to make an impression of love and romance in your project. Then, it would be best if you used some script typefaces. When you plan to convey an image of a professional and credible enterprise, it is better to apply classic styles. There are also chic and elegant styles that will complement your company's image.

If you realized how important it is to alter your site's typeface, this article is for you. Here, we'll guide you on how to add fonts to WordPress and which plugins will be useful for you for that matter.

How to Choose the Font

Studies have shown that many people do not read the entire text on the site but only briefly view (scan) information. The majority of respondents read the content using the F pattern while browsing the web. People pay attention only to those elements that are located on two horizontal and one vertical lines. So the goal is to make the text more comfortable to absorb. If the text in this area is readable and properly structured in importance, the user is more likely to decide to stay on the site. Otherwise, the visitor will leave the page and move on to the next search results.

Varieties of Fonts

All typefaces fall into two main categories: handwritten and printed.

Handwritten text styles have an original look. Some of them are personalized (for example, Kafka, Picasso, Cezanne). They are not suitable for the main typeface for the text, as they impede reading and perception. In web design, printed typefaces tend to complicate perception and distract the reader's attention. This type of fonts' main purpose is to create logos, highlighting headings and important information on the page.
Printed styles can be chopped and decorative.

Chopped. Neutral text's styles, sans serif. Suitable for headings, paragraphs, body text.
Decorative. This type of typeface looks original and bright. They are perfect for youth sites and any creative topic. But text written in decorative style is difficult to read. Designers use them for creating logos and highlighting headings as well.

Top Methods of How to Add Fonts to WordPress?

There are many methods you can apply to change the typeface. All of them depend on your coding skills. If you do not have one, there is a very simple way we are going to describe at the end of the article.

CSS

Most people will probably go for the method to edit the stylesheet or the main CSS file right away. This method is suitable for those who have typefaces already installed on their computers. You can do that in two different ways:

1. First, go to your WordPress installation, following WB content, themes. Here you will find a theme that you're currently using. Once you do that, the next thing you have to proceed to is to get style.CSS and open it in a code editor. It is a place you can make all your changes. Remember, if you are working on a live site, you will have to re-upload the file to your server. In case you are working locally, a simple save will do the trick.

2. The second way you can get to the style.CSS files is to go into your WordPress back-end Theme editor, where you can select stylesheet or style.CSS file from the right sidebar.

If, in any case, you decide to modify your themes, the changes you make in this tab will not apply again.

You must decide on what elements you want to change the typeface;

Do you want to change it on your heading?
Do you wish to modify paragraphs?
Or maybe you plan to edit the button?

Let's say you want to change the typeface on the headings. In this case, you will have to go to your CSS file, search for the header you wish to affect, and add necessary CSS from the font family. Hit the update button.

With the help of this method, you can target multiple elements and change your fonts quickly.

WordPress Customizer

The customizer is another way to add fonts to WordPress. Once you hit the Customize button, go to the Additional CSS tab to write your additional CSS there. In this case, you are not modifying any original CSS code. Instead, you are adding your own by using WordPress customizer. Once you hit the publish button, the change you have made will reflect on your front-end.

Google Fonts

In case you do not have typefaces already installed in your system, you have to find them and upload the ones you want to use in your theme. Do that first thing you have to open Google fonts and select any you like. The next step is to click on the little + sign. To use this typeface, Google provides you several different styles.

Import option, where you will have to copy a link and paste it into your CSS file. But this method is least recommended because it results in a slower page loading time. So, try to avoid this simple but rather damaging option.
Standard option. Please copy the link and paste it into your file, a preferred approach, because it does not use import. Once you do that, go to your stylesheet and specify the font family and its name. And Voila! Your typeface just got modified.

Enqueue the Fonts

The most recommended way to modify fonts in WordPress is to enqueue them. To modify your typeface, go to the standard option mentioned above, copy the actual address, go back to your theme editor, open up theme functions and place the code wherever you want to make a change. Type add_action(wp_enquing_scripts,load_custom_fonts). After that, you have to define a function called load custom. Please make sure you do not interfere with other function names in WordPress.

Free Fonts

If you do not find any text's style hosted on Google or Adobe, you can upload some from other platforms such as FontSpace or Font Squirrel. Both of them have a rich collection of text styles. They can be sorted by type, title, and novelty or category, for example, retro or futuristic. Most fonts are free to use for any purpose. For some, you will have to buy a commercial license. However, for $ 20, you can download the entire collection at once. Besides, Font Squirrel provides a couple of handy and useful tools: a Webfont Generator for creating your web fonts and a Font Identifier that can recognize fonts in images you uploaded and find exactly the same fonts in the Font Squirrel library.

Once it is on your computer, all you have to do is insert it into your WordPress theme. Do that by going back to your stylesheet. Name and specify a source of the downloaded typeface. Click an update button and choose the element you want to change.

Plugins

The methods mentioned above are not very complicated, but they require a bit of coding knowledge to make it work. But what if you are not very tech-savvy and want to change the text's WordPress styles quickly? This alternative will be easy for people who don't have programming skills. With the integration of special extensions, changing fonts will be clear and elementary through your theme dashboard. In this case, some plugins will help us to do that. Let's discuss one of the most popular plugins available for this matter.

Search for Easy Google Fonts, find the one you like, install, and activate it. Afterward, you go to Appearance, Customize, and it opens up the WordPress customizer, where you will have a Typography tab. In this tab, you will find controls for changing the typeface on the paragraphs in each heading. Choose the title you want to change and modify the font family, including the Google fonts you added. To make things even better, you can see a preview in real-time. Once you find the one that you like, you can hit publish. All the changes will instantly reflect on your page. Apart from changing the font family, with the help of this plugin, you can also modify:

Theme decoration;
Text transform;
Front color;
Background color;
Positioning;
Letter spacing, etc.

Easy Google Fonts

It is among the most widespread and simplest additions that will give you the benefits of choosing the custom fonts. What's more, WordPress fonts preview option will be available here as it integrates with WP Live Customizer. Thus, you can experiment as you wish, then preview and confirm the modifications or continue with the updates.

Easy Google Fonts (Free, WordPress) →

Use Any Font

This is the other plugin prepared to amend the fonts without coding skills. Here, you can employ any font without limitations. It means you can take advantage of any font that you have in its format. You can also get it instantly through your WP editor.

Use Any Font | Custom Font Uploader (Free, WordPress) →

WP Google Fonts

To address the issue of how to change font style in WordPress, there is one more comfortable plugin, which will suit beginners. This add-on allows integrating premium fonts while making all needed Google coding for you and letting the possibility to assign Google fonts to certain CSS elements.

If you are interested in other must-have plugins for WP, you can read our article and get inspired by the added possibilities that they bring in.

WP Google Fonts (Free, WordPress) →

WordPress Change Font Size

After finding out how to change the font in WordPress, you'll probably be interested in adjusting the font size. Of course, you cannot have all content types on your site of the same size. You should have some accents, like headers, footers, etc., which will also contribute to making your blog SEO-friendly. You should find this option and all available alternatives of font size in the Visual Editor under the “Paragraph” tab.

You can also apply the Tiny MCE Advanced plugin, which will let you edit the toolbar buttons of your Visual Editor. In the settings, pick the controls you want to use simply by dragging and dropping them to the toolbar rows. If you are interested in other must-have plugins for WP, you can read our article and get inspired.

What Fonts Are Trendy in 2020?

Modern designers give preference to Google Fonts in website design because:

they are of high quality and easy to use;
no issues are occurring during installation;
a big choice of typefaces suitable for any project;
any Google Fonts are displayed well when opening pages with any browser.

Ambit

One of the most popular fonts this year is Ambit. It combines a mixture of grotesque style and modern touch. So wonder if you have already seen it a lot on various brands' packaging or presentations. It also looks very stylish, which will make a good impact on your customer's first impression.

Helvetica Now

This font will never disappear from the top most trendy fonts list. With its regular updates, Helvetica is always going to be in demand. Been redesign from classical Helvetica, the new version called Now will be seen a lot next year.

Avenir Next Pro

One of the bestsellers online, Avenir Next Pro, hits the top ten most popular trends in 2020. It was updated from the classic style. This family design consists of ultra-light to heavy types making a rich 32-font collection.

Platin

Created back in 1913 by the Corporation of British Monotype company, this old-style serif was mainly used for hot metal typing machines. The name it has was borrowed from the old printer called Christophe Platin. Nowadays, it is a perfect solution for publishing purposes. You can add a bit of history to your book design using this font. This year we are witnessing a coming back, and this tendency does not show any sign of slowing down.

Futura PT

Designed in 1927 for Bauer, the paratypes of these fonts are everywhere today. This family has seven weights and eight condensed styles well-matched in metrics and letterforms. You can apply this style to your project, and it will be a definite hit this year.

Norms Pro

This modern geometric sans offers you 22 beautiful styles, which include 11 upright and another 11 italics. Plus, you get two variable kinds to meet the requirements for any project. Grab it in your toolkit to reach unlimited possibilities in 2020.

Visuelt

Created for a famous design conference in Norway, Oslo, this letter style is a modern version of Apercu. Updated weights that now have more precise curves will make a good choice for your website. You can use this typeface for:

Education & Books related projects;
Business Branding & Related Services;
Any Types of Design & Photography;
Home & Family topics designs;

Sentinel

Last and this year, in particular, Sentinel got a lot of attention in the design industry. Users in the community like the fact that this typeface has beautiful italics and additional weights. This type is perfect for those who plan to style small texts. If you are one of them, then you should get the Sentinel font family for your project.

Sweet Sans

Designed by Mark van Bronkhorst, this family is based on master plates templates. Recently it was updated and got a modern look. In the beginning, this font was created to pay tribute to the engravers sans serif. Today it makes its way to the top ten list of the most popular fonts of the year.

Looking for something else? Have a look at the TemplateMonster font catalog. We promise not to disappoint you! You can find fonts for:

Fashion projects;
Startups presentations;
Wedding related events;
Various business events;
Seasonal promotions;
Wholesales and retail;
Service companies;
Production of exclusive products;
Food items promotion;
Personal Portfolio, etc.