How To Add Custom Fonts In WordPress

How To Add Custom Fonts In WordPress And Your Site

This page contains affiliate links and we have advertising relationships with the stores and companies in this post.

If you have recently started planning out your blog and are wondering how to get your text to look a certain way, then you are looking for ways to add custom fonts to your blog. I have heard a lot of new bloggers stress how they do not know how to do this and I think it is something fun that all bloggers should know for any design purposes. So how to add custom fonts in WordPress? In order to add custom fonts to your site or blog you need to add a snippet of the custom fonts code to your site’s header. If you have never done any web development or basic html editing before, you may have no idea what I am talking about and I don’t blame you. That is why I am here, to walk you through the tech garbage and straight to the good stuff.

If you have not yet started a blog and want to, or are having trouble with where to start, check out How To Create A Self Hosted WordPress Blog If you sign up for Bluehost with my link you get a free domain, free site builders, free 1-click WordPress install, 24/7 support and all for only $2.95 a month! You really can’t beat that deal. I have already made $3000 from affiliate marketing alone after only 6 months of blogging, thanks to the Making Sense Of Affiliate Marketing course.

If you want more scale and options out of your hosting, check out managed WordPress hosting options with GoDaddy or WPEngineWith this link, you can get started on GoDaddy today for only $1! 

Here are some free blogging resources that have helped me on my blogging journey. Maybe they can help you too?

The Ultimate Freebie Master List

Masterlist

This master list is composed of the top freebies; free stock photos, checklists, courses, guides, planners, etc.

Powered by ConvertKit

Custom fonts are easier to add to your site than you may think. I am here to tell you how to easily add custom fonts to your WordPress theme or just your regular old site (that may not be WordPress). You will be adding your custom fonts in no time and will be able to mix and match all you like. Be careful though, adding too many custom fonts can slow down the speed of your site as they can take up a lot of resources.

Here is your easy to follow guide on how to add custom fonts in WordPress.

Custom fonts are easy and fun to use. Don’t get crazy with it though.

How To Add Custom Fonts In Your WordPress Site

You know those cute fonts you always see in PicMonkey or Canva and wondered how you can get the font on your site to match the cute fonts you have been using in your images? Well I am about to show you exactly that!

Some themes actually include some font customization in the theme options themselves. Check them out here: How To Create A Beautiful Blog Using Free WordPress Themes.

Search for fonts to use.

Search for fonts in Google Fonts, a popular resource to find high quality fonts for free. I personally love Creative Market for fonts. Creative Market has tons of high quality font bundles for pretty cheap.

Once you search and find the font you want in Google Fonts, select the font by clicking ‘Select this font’.

How To Add Custom Fonts In WordPress

Copy/paste the code given.

In Google Fonts, you need to copy the embed code under the font-family selection tab and paste it in your theme’s header.php file right after <head> tag. An easy way to get to your theme’s header.php look at your left sidebar in WordPress, select ‘Appearance’->’Editor’, then select ‘header.php’ from the file list on the right. Add the ‘<link href=”https://fonts.googleapis.com/css?family=Lobster” rel=”stylesheet”>’ to right after the <head> tag and click save.

How To Add Custom Fonts In WordPress

 

Next, add the CSS portion to your stylesheet, found in the same list of your theme’s files as your header.php. It is usually called style.css or styles.css.

For example add your new font in your stylesheet as either:

.h1 post-title{font-family: ‘Lobster’, cursive;} or .h1 site-title{font-family: ‘Lobster’, cursive;} or whatever class you want the theme to show up as.

The Ultimate Freebie Master List

Masterlist

This master list is composed of the top freebies; free stock photos, checklists, courses, guides, planners, etc.

Powered by ConvertKit

If you want to add fonts from Creative Market.

Adding fonts from Creative Market will be much similar to adding fonts from google fonts except you can either download the .otf and .ttf font files or sync them to your dropbox. Include them in your theme files by uploading them via FTP in you have downloaded them. You can use free FTP tools such as Filezilla to do this. If you were wondering, FTP stands for File Transfer Protocol.

How To Add Custom Fonts In WordPress

If you synced them to your dropbox, you will just change the <link href=”link to your dropbox” rel=”stylesheet”> to link to your drop box location of the synced font files.

Upload the new font to a directory called ‘fonts’ so you can easily find it.

Including the fonts in your header.php will look like this <link href=”/fonts/Light Butterfly.otf” rel=”stylesheet”> and <link href=”/fonts/Light Butterfly.ttf” rel=”stylesheet”> depending on where you have uploaded your new custom font files in your site’s theme files via FTP.

Add the font-family the same way mentioned above to your stylesheet.

If you do not have WordPress.

Add your new font the same ways as mentioned above except this time use your header.html and copy/paste the necessary ‘link href’ code after the <head> tag. Follow the same directions for adding the code to the stylesheet.

That is all you have to do to add your new custom fonts. Now, you are good to go.

Make it easier with plugins.

There are 2 plugins I have come across that are absolutely marvelous for people with no CSS or HTML knowledge. These make it extremely easy for those people to use and add custom fonts to their WordPress site with out any learning curve. Sometimes, we just don’t have the time to learn all this new stuff.

Easy Google Fonts WordPress Plugin

You can easily add custom google fonts with Easy Google Fonts, preview them in the live customizer and create custom font controls in the admin area. No CSS or HTML experience required. Click here to download and start playing around the the plugin now.

Use Any Font WordPress Plugin

Use any custom fonts you wish and give your site a premium and elegant look with no CSS knowledge required. Click here for Use Any Font working demo and get an idea of how the plugin works. You can use uploaded fonts directly from the WordPress Editor or Divi Builder and any visual builder using the class. Fonts can also be uploaded directly from the theme options panel.

No rocket science required!

Related:

How To Create A Self Hosted WordPress Blog

21 Top Tools To Help Boost Your Blog

How To Create A Beautiful Blog Using Free WordPress Themes

How To Create Killer Blog Posts

The Top 11 Resources For Free Stock Photos

How To Create Your Very Own Logo For Free

How To Create Stunning Images For Your Blog In 5 Minutes

The Ultimate Freebie Master List

Masterlist

This master list is composed of the top freebies; free stock photos, checklists, courses, guides, planners, etc.

Powered by ConvertKit

 

 

 

33 comments
  1. Really great guide! I’ve always loved how the simple change of a font can give an entirely new feeling and impression to a site.

  2. Hi! Thank you so much for this post! It is exactly what we are looking for! I absolutely don’t like Times New Roman that we got with our theme and really want to change it! Now I know how)
    Cheers!

Leave a Reply

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