A Shortcut I Learned To Add Gorgeous Font Graphics To Your Site’s Homepage (Tutorial)

Disclosure: This post contains an affiliate link to Creative Market. If you decide to purchase the product, I’ll receive a small commish at no cost to you.

Have you ever been to someone’s website and their homepage is so gorgeous that you keep scrolling up and down the page just to look at their graphics and fonts?

And then you wonder, “man, I would love to get my homepage to look like this.”

Pssh…been there, done that!

For the longest time I couldn’t figure out how to add custom fonts without having to touch any code. Back then, coding was my kryptonite, lol.

I installed a custom fonts plugin for my H1 titles but the script font I chose is too small, so I had to enlarge the font size. But now, the font size for the H1 titles in the Blog Archive page is way too large.

I learned about a shortcut to add custom fonts to titles on the homepage.

You simply create font graphics and upload it to your website. Here’s one I just made for the call-to-action section on my website.

Add Font Graphics To Your Homepage – Step by Step Tutorial

If you’re not comfortable with HTML codes, don’t worry, I’m going to show you the shortcut I learned. Follow along with this tutorial to find out how to easy it is to add a custom font graphic to your site’s homepage.

What you’ll need:

Canva pro plan. It’s $12.95 per month and worth every penny!

A script font. You can use script fonts from Canva’s list, or you can purchase a script font on sites like Creative Market.

This is the font graphic I created on Canva. I used graphic size of 800×350 pixels. And I paired the Lora font with the Bird & Thorn script font* I purchased on Creative Market. When I was done, I downloaded it in a transparent background.

After you’ve created your graphic, upload it to your media file in WordPress.

Now, go to Posts and select Add New like you’re going to create a new blog post.

Click on the first block under the Title and add an image block.

Then click on Media Library to add the graphic you uploaded.

Be sure to the graphic is set to its full size and that it’s centered before going to the next step.

Now, click on the gear icon (the three dots on the right) and select Edit as HTML.

You’ll get a code that looks like this:

Copy the code and paste it somewhere you can grab it from later. When you’ve done that, move the post to trash or click on Appearance then Widgets to leave the editor and select “leave”.

Almost Done!

Next, select the area where you want to add the graphic and add a Custom HTML widget.

Paste the code you copied from the Post editor then click save and done. Preview your website to see the changes and viola, you’re all set!

Note: You might have to play around with the widgets like I had to. For example, I used three custom HTML widgets and placed the code in the widget to the right.

That’s A Wrap!

I hope you found this post helpful. You can also check out the video tutorial below for a quick view on how to generate the HTML codes for font graphics.

And for some tips on font pairings, read this post I found on Pinterest called How To Choose The Best Font Pairings For Your Website.