If you're a graphic designer, learning how to sell fonts online is a great way to generate some passive income from your skills.

There are plenty of font designer marketplaces that will happily sell your fonts for you like MyFonts, Fonts.com, etc...but those resellers will typically take half your sales as a commission and might require that you exclusively sell through them.

WordPress and WooCommerce provide a better way to sell fonts online that cuts out the commission and gives you full control. With the right WooCommerce plugins, you can create a store that's optimized specifically for fonts. You'll get a convenient table layout, complete with font previews and Ajax category filters to help your shoppers find the right font:

Example of table to sell fonts online

In this tutorial, we'll show you how to use WooCommerce Product Table and WooCommerce Quick View Pro to sell print or web fonts online with WooCommerce.

Why WooCommerce Product Table is the best way to sell fonts online

WooCommerce is the world's most popular way to create an eCommerce store and is fully capable of selling both physical and digital products. It makes a great option for a solo font designer, font shop, or type foundry.

However, the default styling of most WooCommerce themes displays products in a more "traditional" eCommerce layout that looks something like this:

Traditional WooCommerce example

Now, that might work great if you're selling physical products. But if you're selling your own fonts, that kind of shop layout...

  • Doesn't display the important information about a font, like how it looks, its different font weights, etc.
  • Wastes space and makes it hard for shoppers to browse all your available fonts.

WooCommerce Product Table is a flexible plugin that fixes those issues by letting you display your fonts in a table layout like you saw above:

Example of table to sell fonts online

This gives you a compact way to help people shop your fonts. Visitors can:

  • See a graphic preview of the font to see kerning, glyphs, ligatures, calligraphy, etc.
  • Choose different weights for each font family from a drop-down.
  • Use checkboxes to add multiple fonts to their carts.
  • Use filters to find specific types of fonts. For example, serif font vs sans serif font, or OpenType fonts.
  • View license options.
  • Plus whatever else fits your business - the plugin gives you full control over what information you display.

Integrate your table layout with product quick view

If you want to display more information about each typeface than the table layout allows, you can add a product quick view button to the table that lets shoppers browse more information in a lightbox.

For example, you could use this product quick view to show:

  • A description of the typeface and its inspiration.
  • More detailed licensing information.
  • More images of your typography in action (or different font weights in action).
  • Font bundles or upsells.
Font product quick view

How to sell fonts online with WooCommerce: Step-by-step

Below, we'll take you step-by-step through how to sell fonts online with WooCommerce and WooCommerce Product Table.

To begin, we'll assume that you already have a fresh WordPress/WooCommerce install. If not, you'll first want to install WooCommerce and complete the setup wizard.

1. Add new fonts as WooCommerce products

To manage your fonts, you'll use the regular WooCommerce product system. The simplest approach is to create one unique WooCommerce product for each new font family that you want to offer. You can then add different font weights or licensing options as product variations within that product.

To do that, go to Products → Add New.

First, enter basic details like the font family name and description. You can also use product categories and tags to add other pertinent information, like whether the font family is serif or sans serif.

You can also add an image to preview how the font looks - the way that Google Fonts handles things is a good starting point:

Add font as WooCommerce product

Next up:

  • Scroll down to the Product data box
  • Choose Variable product from the drop-down (unless you're only selling a single font weight - then you can use simple product)
Choose product type

From there:

  • Go to the Attributes tab and select your attributes (you can set these up by going to Products → Attributes). 
  • Select the Used for variations box.
  • Click Save Attributes.
Add attributes

To finish things out:

  • Go to the Variations tab.
  • Select Create variations from all attributes from the drop-down and click Go.
  • Check the Downloadable and Virtual boxes for each variation.
  • Enter the price. If you want to offer free fonts or other freebies, you can mark it as zero.
  • Upload the font file in whatever format you want to offer.
Configure product variations

Once you've configured all of your variations, publish your product. Then, repeat the same process for all the different font families that you want to offer.

2. Configure WooCommerce Product Table

Once you've added all your font families as WooCommerce products, you're ready to create the front-end interface that you'll use to sell fonts online.

Make sure you've installed and activated the WooCommerce Product Table plugin. Then, go to WooCommerce → Settings → Products → Product tables to configure the plugin.

You can explore all of the plugin's settings, but here are the specific settings you'll definitely want to configure.

First, use the Columns box to configure what information you want to display for each font. A good starting point is:

image,name,category,price,buy

But you can include other information, like custom fields or taxonomies. View all the column options.

Configure columns to sell fonts online

Then, scroll down to the Add to cart column settings and:

  • Choose Button and checkbox from the Add to cart button drop-down. This will allow shoppers to select multiple fonts to add to their cart.
  • Choose how to handle Variations. You can either display each font weight as a separate row in your table. Or, you can display a drop-down next to each font family that lists all of the weights.
Configure add to cart buttons

Displaying variations as separate rows makes it easier for shoppers to purchase multiple font weights, while using the drop-down lets you display more font families in less space.

Finally, go to the Table controls section and configure your Product filters. You can use these to let shoppers filter by font category/tag (e.g. serif vs sans serif) and/or attribute (e.g. font weight):

Configure online font store filters

3. Create your front-end font shop page

Once you've configured WooCommerce Product Table, you can display your front-end font store page by adding the [product_table] shortcode to a regular WordPress page:

Add shortcode to create front-end form to sell fonts online

And once you publish the page, you should see the table that will help you sell fonts online:

Sell fonts online example

You can use various parameters to filter out specific fonts. For example, you could create one table to display fonts from a specific category. Or, you could create a dedicated table to promote your best font, or trendy or popular fonts.

4. Add product quick view button (optional)

If you want to display more information about each font, you can add a product quick view column to your table using the WooCommerce Quick View Pro plugin.

Once you've installed and activated the plugin, you can then go to WooCommerce → Settings → Products → Quick view to configure how the quick view box works:

Configure WooCommerce Quick View Pro

Then, you can add a quick-view column to WooCommerce Product Table to achieve this effect:

Font product quick view

Tips for selling fonts more effectively

Once you've set up your basic online font store, you'll want to consider implementing some more advanced sales tactics to boost your revenue and sell fonts online more effectively.

Sell font bundles

People who purchase fonts online love bundles - there are even entire sites dedicated just to selling font bundles. For example, you could bundle different font weights together or fonts that pair well together.

The WooCommerce Product Bundles plugin lets you bundle together as many fonts as you want. You can then display your bundle options in the product quick view box in your fonts table. The bundles will not display in the table itself - but they will appear in the quick view box if you use WooCommerce Quick View Pro.

Create upsells

Another good option is font upsells, which let you recommend a similar font/bundle in place of the font a shopper is looking at.

You can create font upsells using the built-in Linked Products feature in WooCommerce and display them in your product quick view box.

Launch your WooCommerce font store today

By creating your own WooCommerce store to sell fonts online, you eliminate the middleman and ensure you don't have to give up 50% of your sales as a commission to a third-party font marketplace.

However, if you want to use WooCommerce to sell fonts online, you'll also want to use some extensions to create a more optimized font shopping experience.

WooCommerce Product Table lets you create an optimized, table-based shop layout page to display your fonts. You'll be able to share previews, list pertinent details like font weight and type, and allow shoppers to purchase multiple fonts at the same time.

If you want to display more information about each font, the WooCommerce Product Table plugin integrates with the WooCommerce Quick View Pro plugin to help you add a product quick view button that opens a box with more detailed previews, descriptions, and license terms.

Get started today and create your own WooCommerce store to sell fonts online!

Do you have any questions about how to sell fonts online with WooCommerce and WooCommerce Product Table? Ask away in the comments!