How to Make Your Website Template Feel Custom: Fonts | theblogstop.co

Tokyo template now available | shop now

Completely customizable Showit website templates that were designed to be as creative as you.

the shop

shop templates

let's get social

top posts

How to Make Your Website Template Feel Custom: Fonts

How to make your website feel custom, website fonts, good website fonts, how to make your website fonts look good, The Blog Stop

Welcome to the next step in our website template customization series: selecting the right fonts! If you missed the first two parts of this series, you’ll want to — errrtt!!! — stop right here and go take a peek at those:

Okay, back to fonts. When it comes to designing your website (or any site), you’ll want to select 3 complementary fonts. No more, no less! In design speak, we call your website fonts a “font palette.” Your font palette includes:

  • A Header Font: Usually your logo font and the largest text on your site
  • Subheader Font: For secondary headers (2nd largest font)
  • Paragraph Font: The font of your primary text and most of the content of your site

Now that you know your mission — to pick 3 great fonts, obvi — let’s walk through the steps together…

How to make your website feel custom, website fonts, good website fonts, how to make your website fonts look good, The Blog Stop
How to make your website feel custom, website fonts, good website fonts, how to make your website fonts look good, The Blog Stop

Step 01. Revisit your brand

The first step in selecting a font palette for your website is to revisit your brand. This is the same work we did when selecting your color palette. This included asking questions like:

  • How do you want your audience to feel when they engage with your brand?
  • If your business had a personality, what would it be?
  • Would your ideal audience be attracted to that personality? Why or why not?

Jot down your ideas and goals if you haven’t already. When you’re stuck between two great fonts, come back to this list for the tiebreaker.

Step 02. Understand font types & vibes

There are 4 main font types: serif, sans-serif, slab serif, and script. Each has its own associated vibe and best use cases. Here’s a quick little overview to help you decide which styles will be best for your brand and website.

How to make your website feel custom, website fonts, good website fonts, how to make your website fonts look good, The Blog Stop

Serif Fonts
Characteristics: Letters have “feet” at the bottom and tails on the edges
Vibes: Editorial, Traditional, Timeless, Formal, Sophisticated
Best for: Header or subheader (and potentially paragraph text, if highly legible)

Sans-Serif Fonts
Characteristics: “Sans” (meaning without) serifs, so these fonts lack feet or tails 
Vibes: Modern, Clean, Minimal, Approachable, Readable (best for longer text) 
Best For: Header, subheader or paragraph text

Slab Serif Fonts
Characteristics: In the serif font family, but more blocky and typewriter-esque
Vibes: Retro, Funky, Nostalgic, Dry (“too cool for you” vibe), Interesting
Best for: Header or subheader (and potentially paragraph text, if highly legible)

Script Fonts
Characteristic: Handwritten look, such as a flowing script or scribbled
Vibes: Organic, Personal, Playful, Neat, Informal (balances more serious fonts)
Best for: Header or subheader (NOT paragraph text)

Step 03. Create Your Font Palette

Now, you’re ready to play with some fonts! There are a few tools I like to use, and I think you’ll find them fun and easy, too. 

Google Fonts

Google Fonts is one of my favorite sources for fonts, because they can be used on pretty much any platform — ShowIt, ProPhoto, and Squarespace. They let you search by category (serif, sans-serif, slab, script), so you can quickly narrow down the hundreds of options to the ones that are more likely to fit your brand.

In the top right corner of each font type, you’ll also see a number that indicates how many different styles of that font there are — bold, italic, semi-bold, etc. I suggest selecting fonts that have multiple styles so that you’re not limited down the road.

Fontjoy is a fun one, and there are a few ways you can use it. First, it automatically generates font palettes that work together. So if you don’t want to bother with picking some from Google, you can click “generate” to see what combos they create. (They pull from Google Fonts anyway.)

Fontjoy

Second, if you have selected one or two Google fonts but you’re struggling with the others, you can “lock” your favorite font type, and use their auto-generator to find complementary ones. 

Lastly, once you have chosen all 3 of your fonts, you can plug them into Fontjoy to view them side by side and in their respective header/subheader/paragraph sizes. Together, you can see very clearly if they work or don’t work — and if you like them.

How to make your website feel custom, website fonts, good website fonts, how to make your website fonts look good, The Blog Stop

Creative Market 

Creative Market is a marketplace of custom fonts, especially script fonts, that are available for purchase. Google Fonts doesn’t have a lot of great script fonts, so if you’re committed to finding one you love, Creative Market is the way to go. 

If you download one of our templates, you can follow Showit’s tutorial for adding these custom fonts to your website template. Otherwise, a quick Google search can help you with the logistics. 🙂

How to make your website feel custom, website fonts, good website fonts, how to make your website fonts look good, The Blog Stop

Final Note to Keep in Mind

Lastly, I do want to mention font licenses.  I love sticking with Google Fonts because they are all available for personal and commercial use without a license. However, custom fonts are creative property, and many require you to purchase a license to be able to use them. 

In your search, you might also notice that many fonts are available for download online without charge… but be careful! Many times, these sites circumvent the artist and are being provided by someone who isn’t the seller and doesn’t legally have the right to give them away. (Black market for fonts? Who knew?!)

Anywayyyyy, I’m not a lawyer, but I definitely don’t want you to get in trouble, so keep a sharp eye. Google Fonts and Creative Market are safe options! 

That’s it for today, but I hope this was helpful. Any questions, just ask. And if you’re still in need of a kickass website template, look no further!


xx,
Ariel

Completely customizable Showit website templates that were designed to be as creative as you.

the shop

shop templates

top posts

let's get social

setting up your showit site 101.

A quick & dirty crash course for the creative, non-designer on setting up your Showit website in 3 simple steps - get instant access to the free video series.