Beginners' Guide – Use Awesome Free Fonts to Beautify Your WordPress Sites

Note: This document is a resource share, here, you will find many sites that provides free

fonts for WordPress, which will help you create a better WordPress theme.

Popular design wisdom establishes that different kinds of fonts are better suited for specific

purposes, such as serif being better for printed works, and sans serif excelling when it comes to

high-impact headlines. Without further ado, let’s quickly go over the WordPress font installation

process, then over our picks one by one.

How to Add Fonts to Your WordPress Website?

There are two ways you can go around adding fonts to your WordPress repertoire.

#1. Make some simple CSS modifications

Find a Font

There are many places to find great web fonts for free, just make sure the font you choose has a

licence suitable to your needs.

There are also two main kinds of fonts: Serif and sans-serif. Serif fonts have curls over the edges

while sans-serif fonts do not. The amusing image to the left might help you remember the

difference between the two types. Once you have chosen your new font, you need to download

its file. Keep in mind that there are different kinds of font files and they aren’t all compatible

across most major browsers.

Here’s a quick summary of different types of fonts and their file extensions:

TrueType Font (TTF) – Compatible with Internet Explorer version 9.0 and above, Chrome starting

at 4.0, Firefox at 3.5, Safari since 3.1 and Opera beginning with 10.0

OpenType Font (OTF) – Has the same browser compatibility as the TrueType Font

Web Open Font Format (WOFF) – Supported by Internet Explorer version 9.0 and above, Chrome

starting at 5.0, Firefox at 3.6, Safari since 5.1 and Opera beginning with 11.1

Web Open Font Format 2.0 (WOFF2) – Supported only by Chrome since version 36.0, Firefox

starting at 35.0 and Opera with 26.0

Embedded OpenType Font (EOT) – Exclusively available for Internet Explorer version 6.0 and

above.

The Web Open Font Format has become the standard since the fonts are compressed to consume

less of your bandwidth and contain extra metadata. Unfortunately, they’re not always available to

download.

If you’re having trouble finding this kind of file, TrueType and OpenType fonts are more readily

available for download and are still great choices.

Uploading Your Font

Once you’ve found the font you wish to use and followed your source’s instructions for

downloading the file, it’s time to upload it to your server. Before you do, it’s a good idea to

backup your entire site before making any changes.

It’s best to add it to the folder of your theme, which can be found under wp-content > themes >

your-theme. You could optionally create a “Fonts” folder to house your file to keep things

organized, especially if you plan on adding more than one font.

Unzip the packaged file and upload the contents to your theme folder. In cPanel, click the File

Manager button under Files on the main page. If a pop-up opens, select your site’s location

followed by the Go button. Navigate to your theme folder and click the Upload button at the top

of the page.

You should be able to keep the file permissions to 644 and not run into any issues. If you receive

a permission error, try deleting the files and uploading them again with different permissions.

Click the Choose file button on the Upload Files page and choose the font files from your

computer. Once selected and opened, the files will upload automatically without clicking another

button on this page.

No matter where you place your font file, you need to remember its file path. It will be listed on

this page in bold after the words Select files to upload to.

Adding Your Font to Your Theme

To allow your uploaded font to actually appear in your theme, you need to call it in

your style.css file, which you can find under wp-content > themes > your-theme.

In cPanel, select the file, then click the Edit button at the top of the page. If you haven’t

previously disabled pop ups, one will appear. If this is the case, click Go at the bottom.

Copy and paste the following code into the file, ideally somewhere where fonts are referenced.

Make sure there is a line break in between each block of css and the code you enter.

@font-face {

font-family: FontName;

src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf);

font-weight: normal;

}

Don’t forget to replace the font name with the one you uploaded and update the code to reflect

the correct the file path.

Add the same CSS code additional times to define bold, italicized, header text and the like,

keeping sure you update the file name and path to reflect the purpose of the font.

Finally, define where your font will be used with some more CSS, such as in the example below:

p {

font-family: FontName;

}

In this example, all paragraph text will use the new (fictitious) font. Once you update this code to

your own specifications and save the file, your new font will be viewable on your site.

#2.Use WordPress Plugins

Use Any Font

Use Any Font is marketed with the tagline “Embed any font in your website.” A simple enough

promise that describes exactly what this plugin delivers.

Download: https://wordpress.org/plugins/use-any-font/

WP Google Fonts

WP Google Fonts makes adding custom fonts to your site really easy. After installing and

activating the plugin, go to the settings page (located at Settings > Google Fonts) where you can

add new fonts and assign each of them to elements such as headlines, blockquotes, paragraphs

and lists. You can also add custom CSS.

Download: https://wordpress.org/plugins/wp-google-fonts/

Easy Google Fonts

Easy Google Fonts gives you incredible control over how you integrate custom fonts your on your

website. It’s easy to use (once you work out you need to use the Customizer) and you can tweak

the font on just about every element on your site.

Download: https://wordpress.org/plugins/easy-google-fonts/

Typekit Fonts for WordPress

This plugin has been designed with Typefit users in mind. If you’re looking for a straightforward

solution for adding custom fonts to your site, I suggest you check out some of the other plugins

mentioned in this article.

Download: https://wordpress.org/plugins/typekit-fonts-for-wordpress/

FontMeister

FontMeister would be a really useful custom font solution for developers – if it worked. The

ability to browse and add fonts from third-party services from within the plugin is a fantastic

feature. Hopefully the developer will update this plugin soon.

Download: https://wordpress.org/plugins/fontmeister/

Where to Find the Best Free Fonts for Your WordPress Site?

1001 Fonts

Don’t let its name mislead you. Although the site originally started with 1001 free fonts, it now

has more than 30,000 to choose from and is continuing to grow. From adding a spooky text to

your headers to creating a handwritten appeal, this site is loaded with fonts you can use in

WordPress. You can download these fonts individually or use the service to mass-group them

together in one zip file.

Font Squirrel

Font Squirrel is a great place to get free WordPress fonts. Not only can you download from a

database of hundreds of typefaces, you can also use the “Embed” ability to directly add the font

to your CSS file in WordPress. This could save you from having to download and then upload the

font to the theme’s “Font” folder on your web hosting provider.

Google Fonts

Leave it to Google to build an extensive database of fonts on top of its many other services. Like

Font Squirrel, Google Font makes it easy to install the typeface using an embed code. With a few

tweaks to the CSS file in WordPress, your site could be utilizing one of more than 600 fonts. As

mentioned earlier, there is a plugin that makes adding fonts from Google much easier without

you putting a single thread of code into the site.

UrbanFonts.com

Urban Fonts has hundreds of fonts to give your WordPress site a unique typeface. You can also

purchase premium fonts that are more extensive and professionally created. However, most of

these are redirected pages that go to other sites for purchasing the font.

Simply the Best

SimplyTheBest.net has a wide variety of free fonts that can be used for non-commercial

purposes. Available for both PC and Mac computer systems, you can add them to your site or

simply leave them on your computer system. No account is necessary, and you can download the

ZIP file directly to your computer once you find a font you like.

Font Space

With nearly 30,000 fonts to choose from, FontSpace.com is another outlet of designer typefaces

that have been shared by many graphic design professionals. Although you can sign up for a free

account on the system, it’s not needed to download the ones you want. The database is

extensive when looking for free WordPress fonts, and could offer several ideas for your future

projects. While there are a number of fonts available, the site doesn’t have the same capacity for

finding specific categories as some of the other domains.

WordPress is capable of using virtually any font you want. From easy-to-use plugins to modifying

the CSS file of the theme, the typeface can give the site a whole new presence. Why stick with

the default text as it appears on your pages when you can enhance the experience for all who

visit?

What kind of fonts do you use on your website? Is there a specific typeface that is your favorite

when design your pages?