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…

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.

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.

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

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!