How to Change Fonts in WordPress to Make Your Website Unique
Posted: Wed Dec 18, 2024 8:31 am
The days of a website based on white pages, black text and blue links are fading into history. Today, if you want to get noticed, your website has to “pop.” JavaScript, CSS and images all add up to making your website eye-catching. Fonts also add a lot to the distinctive look of your website.
However, unlike some of the other elements on your website, fonts can be large blocks of data that, if not handled correctly, can slow down your website's loading. Speed is king these days , so while being eye-catching is important, you want to make sure you're not affecting your site's speed when using fonts.
In this article, we'll look at fonts and how they relate to WordPress, how to change fonts in WordPress, how to use Google Fonts within WordPress, and finally, how you can organize your fonts so that they make your WordPress site look good without affecting speed.
So let's get started, shall we?
How to Add New WordPress Fonts to Your Site
1. Choose a font in the correct format
The first step you need to take when working with fonts is to select your font and include it on your website. If you search around, you will find many free fonts available for use. These fonts come in a variety of formats. You want to make sure that when selecting a font, you choose one that is available in the right format. As with everything on the web, you have options and not all are created equal.
EOF: Embedded OpenType Fonts
This format is for more compact OTF fonts.
OTF: Open Type Fonts
These are the most used web fonts.
TTF: True Type Fonts
This is an older format developed in the 1980s by Microsoft and Apple.
WOF 1.0: Web Open Source Format
This format is widely used for web pages and is recommended by the W3C.
WOFF 2.0: Web Open Source Format
This is a better option than WOFF 1.0 due to its better compression capabilities.
At the time of writing, all formats were supported by the current version mexico whatsapp number data of all modern web browsers. (NOTE: Internet Explorer is not a modern web browser.)
All of the above formats will work, but for performance reasons, use WOFF2 fonts whenever possible . Because they are compressed, they load faster.
2. Add the WordPress font to your site
There are a few different ways to add custom fonts to your theme. Let’s look at two options: how you can do it manually and how you can do it through themes and plugins.
Option 1: Add fonts manually via File Manager
First, let's look at the hard way. Loading them manually.
The first thing we need to do is find a font. I got one from one of my personal sites, but you can search and find one you like.
Next, we need to upload the actual font file to our website. Since my test site is hosted on SiteGround, I use SiteTools->File Manager to do this.
I am using the current default WordPres theme: twentytwentyone . So in that directory I create a directory called “fonts” and upload my font file there.
However, unlike some of the other elements on your website, fonts can be large blocks of data that, if not handled correctly, can slow down your website's loading. Speed is king these days , so while being eye-catching is important, you want to make sure you're not affecting your site's speed when using fonts.
In this article, we'll look at fonts and how they relate to WordPress, how to change fonts in WordPress, how to use Google Fonts within WordPress, and finally, how you can organize your fonts so that they make your WordPress site look good without affecting speed.
So let's get started, shall we?
How to Add New WordPress Fonts to Your Site
1. Choose a font in the correct format
The first step you need to take when working with fonts is to select your font and include it on your website. If you search around, you will find many free fonts available for use. These fonts come in a variety of formats. You want to make sure that when selecting a font, you choose one that is available in the right format. As with everything on the web, you have options and not all are created equal.
EOF: Embedded OpenType Fonts
This format is for more compact OTF fonts.
OTF: Open Type Fonts
These are the most used web fonts.
TTF: True Type Fonts
This is an older format developed in the 1980s by Microsoft and Apple.
WOF 1.0: Web Open Source Format
This format is widely used for web pages and is recommended by the W3C.
WOFF 2.0: Web Open Source Format
This is a better option than WOFF 1.0 due to its better compression capabilities.
At the time of writing, all formats were supported by the current version mexico whatsapp number data of all modern web browsers. (NOTE: Internet Explorer is not a modern web browser.)
All of the above formats will work, but for performance reasons, use WOFF2 fonts whenever possible . Because they are compressed, they load faster.
2. Add the WordPress font to your site
There are a few different ways to add custom fonts to your theme. Let’s look at two options: how you can do it manually and how you can do it through themes and plugins.
Option 1: Add fonts manually via File Manager
First, let's look at the hard way. Loading them manually.
The first thing we need to do is find a font. I got one from one of my personal sites, but you can search and find one you like.
Next, we need to upload the actual font file to our website. Since my test site is hosted on SiteGround, I use SiteTools->File Manager to do this.
I am using the current default WordPres theme: twentytwentyone . So in that directory I create a directory called “fonts” and upload my font file there.