• Skip to main content
  • Skip to footer

Cori Ramos

Author's Assistant

  • Home
  • Work With Me
    • Author Platform Set Up
    • Social Media Management
    • Pinterest Graphics Design Services
    • Pinterest Support Services
  • Client Testimonials
  • Tools and Resources
    • Styled Stock Images
    • Author Facebook Group
    • Digital Library – Members Only
  • From The Blog
    • Blogging Tips
    • Business Tips
    • Social Media
    • Marketing Tips
    • SEO Tips

on January 8, 2020 · 1 Comment

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.

font graphics

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.

font graphics

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.

A Shortcut I Learned To Add Gorgeous Font Graphics To Your Site’s Homepage (Tutorial) #graphicdesign #tutorials #wordpress #wordpresstutorials #websites

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.

You Might Also Like

Share5
Tweet
Share
Pin16
Flip
Share
Pocket
21 Shares

Filed Under: How To's Tagged With: tutorials

About Cori

Hi, I'm Cori. I'm a Virtual Service Provider supporting authors, bloggers and solopreneurs with website set-ups, social media management, blog content and other administrative tasks. You can find me on Facebook , Twitter , LinkedIn , and Pinterest.

Previous Post: « How To Set Up Author Tracking Using MonsterInsights
Next Post: Infographic: How to Fix a Toxic Work Environment »

Reader Interactions

Comments

  1. Dana says

    January 10, 2020 at 12:37 pm

    Awesome tip, Cori. I love Canva!
    Great to be able to add it to the blog. The visuals you added are super helpful 🙂

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Footer

Recently Published

New Blogging Course: How To Create Quality Content

4 Ways To Build Up A Positive Business Reputation

Are You Relatable As A Writer? 4 Things To Evaluate To Make Sure You Are

8 Helpful Tips For Creating An App For Your Business

5 Tips For Hosting A Successful Twitter Chat

4 Effective Ways to Skyrocket Your Product Sales

Proudly Partnering With

Search This Site


Create your Privacy Policy

  • Home
  • About Me
  • Meet The Team
  • Contact Me
  • Privacy Policy
  • Sponsored Post Guidelines

Copyright © 2021 · Design by Studio Mommy

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.Accept Reject Read More
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

SAVE & ACCEPT