How to Choose the Right Fonts for Your eCommerce Website

In general, serif fonts are more traditional and are an excellent way to exude knowledge and trustworthiness. They can also be easier to read, because the serifs help define each letter individually. Sans serif fonts are clean and can feel more accessible than their counterparts. They’re still simple and easy to read in large bodies of text.

For more details and instructions, check out this article from Kinsta.

Get creative, but remember that simple is best

When you make a website accessible, you make it easy for every single visitor to use, including people who have physical or mental impairments. There are a variety of things you can do to improve the accessibility of your online store, including optimizing your use of fonts.

So, if you do want to use all caps, use it sparingly and only in headlines. That’s what Veer does — all capital letters are very effective at making points and grabbing attention on their site, but they avoid it in paragraphs.

What about web safe fonts?

Serif fonts include extra strokes added to certain letters, while Sans Serif fonts omit those strokes. You can see an example of letters with and without serifs below:

serif and sans serif fonts compared

Daelmans Stroopwafels, for example, uses the same font for headlines and body text. They use a bold, all-caps version for headings, and a lighter version for body text. But, to add even more personality, they occasionally use a script font that mimics the caramel included in their products. This script, when used sparingly, is effective at highlighting important concepts and making their site feel authentic and unique.

Scrollino website with unique fonts

Your online store’s branding is made up of many different components; from the colors and logo to the language you use, as well as the quality of your customer service. And, of course, fonts are a big part of that.

In the Customizer, you can also adjust options for font style (bold, italicized, etc.) and size.  

2. Use a plugin

Here’s an illustration of all three:

illustration of tracking, kerning, and leading

If you’re familiar with code, you have two other options:

  1. Host fonts on your own site and use code to apply them to areas of text
  2. Load the fonts from a third-party source (like Google Fonts) and enqueue them

Ryanair’s corporate website is, well, corporate — and their fonts reflect that. They chose versions of the same simple, professional font for both headlines and body text. It’s professional without seeming stuffy.

While it may be tempting to incorporate all the great fonts you find into your site, you’ll want to stick to just a couple. Otherwise, your store can seem disconnected and all over the place, and you may create a jarring experience for visitors.

The identity of your brand is what sets you apart. It’s the personality of your business. And the fonts you choose are one component that displays that personality to potential and existing customers.

When choosing your fonts, pair them in different scenarios to see if they work well together. You may choose one font for headings, and another for body text. You can also use variations of a font — like bold or all caps — to set text apart without straying from the same font family.

Stroopwaffels website with custom fonts

Heggerty, a company offering curriculum and other resources for teachers, uses pleasantly big font sizes. While they’re not so big that they take over the design, they’re simple and easy to read on all devices.

5. Consider accessibility 

Okay, so now that we’ve established the basics, let’s look at a few handy tips for choosing the right fonts for your online store.

1. Consider legibility

Kinsta offers some great advice for adding backup web safe fonts to your site.

Where to find fonts for your website

Now that you’ve picked your fonts, it’s time to apply them to your site. There are three primary ways to do this:

1. Use your theme

As mentioned earlier, a lot of themes include a library of fonts. Some allow you to apply those fonts to your site in their own settings panel. Or, you can set up those fonts using the WordPress Customizer:

  1. In your WordPress dashboard, go to Appearance → Customize. 
  2. Click on the Fonts option.
  3. Open the dropdown for each type of text — Headings, Base Font, etc. — and select a font. Each time you switch fonts, the preview of your site will update so you can test what it will look like before applying it.

Scratch Pet Food has a brand that’s super friendly, and their fonts reflect that. They use an extra bold sans serif for headlines and a lighter sans serif for body text.

flor fonts on their homepage

The next thing to think about is the spacing between your text. There are three main spacing considerations:

  1. Kerning: The amount of space between two letters. Proper kerning ensures that each word is individually legible and that one word doesn’t end up looking like two.
  2. Leading: The distance between two lines of text. Proper leading makes paragraphs of text much easier to read.
  3. Tracking: Controls letter spacing in words as a whole, rather than individual characters. So, instead of just adjusting the space between the “t” and the “h” in the word “this”, you’d adjust the spacing between all four letters at once.

Have fun with your fonts! Be creative with your branding and choose options that best represent the feel of your company. But, at the same time, remember that simple is often the way to go. Choose fonts that are easy to read and don’t get too complicated by using four or five different options. Your audience should be your top priority. 

Visit the extensions marketplace to customize your store


These three don’t look very similar, do they? But they’re a great way to establish brand feel.

How to choose and implement the right fonts

Let’s take a step back for a moment. You’re probably familiar with typefaces like Times New Roman, Helvetica, and the much-maligned Comic Sans. But what are they, exactly?

While all caps can be great for making a statement, they can be very difficult to read in bodies of text. Our brains simply have trouble processing capitalized text in paragraph form, which makes reading it slower and more difficult.

Veer website using all caps in headlines

If your theme doesn’t include fonts, or doesn’t offer the fonts you want to use, the next easiest option is to use a plugin. There are a variety of options available, but if you want to use a Google font, then WP Google Fonts is a great one. It provides access to the entire Google Fonts library, then allows you to apply individual fonts to various areas of your site, like headers, paragraphs, and lists.

So how do you find great fonts for your online store? Your first step is to make sure that you have the legal rights to use whatever options you choose. Some are free for all purposes, others are premium for all purposes, and still others are free only for personal use. Take the time to understand how the license works for your fonts.