Sunday, January 23rd, 2022

How to Add Custom Fonts to WordPress Correctly Without a Plugin

WordPress is one of the most popular content engines that allows you to create multi-component online platforms. You can create a blog, an online store, a news portal, and a general website. Using WordPress, you will have useful tools for customizing ready-made templates and building websites.

Everyone knows that one of the important aspects of an attractive resource’s visual appearance is a cohesive and stylish typography. Much more depends on the fonts than you imagine. They can lure customers in, or spoil their impression of the website.

So, answer the question: Why use boring and unattractive scripts? Let your site shine and fully convey the mood and message of the project. Use custom, flexible fonts that make your platform stand out from competitors’ websites. Today we will show you how to add custom fonts to WordPress without plugins.

This way you can avoid overloading the site with plugins and create adorable typography. So let’s go!

Why Use Custom Fonts for a WordPress Site?

add custom fonts

Typography is a whole science of using scripts. And it is impossible to tell you about it in two words. It’s not just about the font, but also about its size, slope, thickness, and more.

Above all, the characters you use have a lot to do with how your site is perceived. what is your platform? Funny and Entertaining? Serious and expert? Visitors decide that at a glance, and your typefaces play a big part in this process.

Fonts have more impact than you think. They improve your comprehension of the material you read. Because on a subconscious level, every user evaluates the content of a web page by its design. The script used makes it easier to read or forces users to leave the web page.

All modern browsers include a set of default fonts. If the font is not specified in the web page’s CSS, the default typeface will be applied. Hence, you need to add a custom font to your WordPress site to avoid the hassle.

font selection and download

Choosing the appropriate script for your WordPress site is a central part of web design and site branding. Typography plays a big role in how visitors view your site, as do colors, images, and other elements. Fortunately, WordPress fonts are one of the many things you can customize freely.

There are a huge number of resources on the Internet where there are various premium and free fonts. We recommend that you peruse MasterBundles to find high-quality premium items. There are unique and best script fonts out there. And if you want to opt for the free option, then go for Google Web Fonts.

When searching for a web solution in the Google Fonts archive, you can refer to the user interface. There you will be able to find the perfect script for your purposes. If you’ve already selected the letter, you can simply enter its name in the search box on the right sidebar.

If not, you can filter the script in different ways, such as by category, language, slope, thickness, etc. Next, download the product of your choice and now you can start adding fonts manually in WordPress.

Adding Fonts to WordPress Without Plugins

When it comes to manually adding custom fonts to WordPress, you have three main options: WordPress template file, @Import, And @font face Work. Each method has its own pros and cons, and which one is most suitable depends on your capabilities.

1. Using WordPress template file.

The first way to add custom fonts to your site is to take the code provided by the script library and copy them into the template’s header.php file. Most standard WordPress themes have this.

make sure to put it somewhere in the middle

and parentheses. This way, your font will be loaded when the page loads.

If you are using a child theme, make sure to copy the parent theme’s header.php file to the child one directory and make changes to it.

Some themes come with settings that allow you to add custom code to the header and footer via the backend. This is also a very effective option.

2. CSS and @import . Using the

If you are planning to set a custom font from the Google Fonts collection, you may notice that they have a tab named @Import, The service provides you with a piece of CSS code. for example:

code 1

You can take it as it is and paste it in the header or copy it without the ‘style’ brackets at the beginning of your theme style.css file.

This will load the font from the stylesheet into the website. This method is quite simple, but it does not allow the browser to load multiple style sheets at the same time. And as a result, the pages of the site will load slowly.

3. @font-face . Using the

One way is to place fonts on your website and present them to your browser’s visitors from there. When you do, make sure you get it in web font format. It must be TTF, OTF, or WOFF format.

When you have the script files ready, you need to upload them to the WordPress site via FTP. A good place to store them is in a subdirectory of your child theme named fonts.

After that, you need to load the typeface into the stylesheet @font face, Here is what it looks like:

code 2

Don’t forget to change the font name and the address of its location on your site. After that, your new font will be available to use.

There is another method that most people consider to be the most appropriate and correct. You can use functions.php file in current active theme directory and functions wp_enqueue_script or wp_enqueue_style,

With their help, we can take code fragments provided by font sites. However, instead of copying them to a file, add them to the header via a function.

Once you have selected Google Fonts to work, you should add them to the site using the following code:

code 3

That’s all. We hope this article helped you with the task and now you can easily add fonts to WordPress in various ways.

About Mr Post

Mr Post

Mr. shares exciting WordPress themes, plugins and other WordPress related news for our audience. He also posts featured WordPress developers interviews from time to time.

Free Genealogy Themes

Source link