Blogging

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.

custom-font-1

  • 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.

custom-font-2

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

custom-font-3

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

custom-font-4

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

custom-font-5

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

custom-font-6

Step 3

Adding the CSS.

custom-font-7

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

custon-font-8

  • 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.

custom-font-9

  • 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!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

4 Comments

  1. Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice http://www.samozoani.com

    1. Hi! 18 plugins seems like a bit too much. My rule is that I try to trim down anything that’s unnecessary. I think the font I was using is called “Europa” and it’s a free font. 🙂

  2. Hello, thank you so much for this explanation!
    I did follow your steps, and sadly my website looks super different now. the font is not visible. Do you have any Idea what I could do to get it back in shape and to have my font visible?
    Thank you! =)

    1. Hi Amina! Uh-oh, sorry it didn’t work out. It sounds like there might have been a typo in the .css file. Did you make sure everything was typed out exactly as above?