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.
As for the cPanel login, your webhost should have provided that info in an e-mail.
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.
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.
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“.
Your font should now be working. All you have to do is replace your old font with the new one in the CSS!