How To Add A Custom Font To Your Site

In this tutorial, I’ll show you how to add a custom font to your site. This will work if you have your own domain, and preferably, WordPress. It might look like there are quite a few steps, but don’t worry, it’s a really simple process!

First off, you should have two things handy:

• A cool font in a .otf or .ttf format.
• The cPanel login information for your domain.

You can find free fonts online or on Google Fonts, or you can buy ones from Creative Market.

As for the cPanel login, your webhost should have provided that info in an e-mail.

Let’s start!

Step 1

Creating a webfont kit.

• Go to FontSquirrel.com.
• Click the “Generate” tab.
• Upload the font from your computer.
• Click “Download Your Kit“.

You’ll get a .zip file. Unzip it.

Step 2

Uploading the webfonts to your site.

• Login to your cPanel.
• Scroll down to “File Manager“.
• Select “Document Root For [yoursite.com] and click “Go“.

• Navigate to wp-content/themes/[your theme]. Just double-click each folder.

• Create a new folder and call it “webfonts”.

• Click “Upload“.
• Browse to your webfont kit.
• Select each of the 5 webfont files and upload them.

Step 3

Adding the CSS.

• Open stylesheet.css in the webfont kit (as a text file).

• Modify the font name if needed. This is the name you’ll use in the CSS to change your font.
• Add “webfonts/” at the beginning of the URL for each file.
• Modify the weight and style as needed. If your font is bold, change the weight to “bold”. For italic fonts, change the style to “italic”.
• Select the whole text and copy it.

• Log into WordPress.
• Go to Appearance and select Editor.
• On the right menu, click stylesheet.css.
• Paste what you just copied somewhere near the top of the file.
• Click “Update File“.

You’re done!

Your font should now be working. All you have to do is replace your old font with the new one in the CSS!