Open source font pairings for your next theme

Mel Choyce discusses and highlights GPL-compatible fonts.

Pairing type can be hard, especially when you’re limited to using only free, open source fonts in your themes. What that means can be confusing, and there aren’t a ton of high quality sources for you to obtain compatible fonts.

I want to talk to you about font licensing, where to find high quality, expressive free fonts, and show off some examples for font combinations you can use in your own theme designs.

Let’s dive into some of the basics.

Font Licensing

Any assets included in your theme for distribution on WordPress.org must be GPL-compatible. This includes any fonts you plan on bundling with your theme.

Open source fonts are usually released under the SIL Open Font License, or OFL for short.

Finding the perfect typefaces for your theme can be challenging. Limiting yourself to the smaller bucket of available OFL fonts? Now that’s stressful. Open source fonts sometimes have a few downfalls to look out for:

  • The font might not include multiple weights and italics or obliques.
  • The kerning on the font might be spaced unevenly.
  • The fonts themselves might not be high quality.

However, constraint breeds creativity. We can still design professional, visually appealing themes using plenty of available license-compatible fonts.


Where to find free fonts

There are many places to find OFL fonts, ranging from directories, to curated collections, to individual type foundries. Here are a few sources I recommend.

Directories

Google Fonts

With almost a thousand available fonts, Google Fonts is one of the largest directories of open source fonts on the web.

Google Fonts’ filtering tools allow you to view fonts that contain a minimum number of available styles, which can often be a proxy for quality. I’ll usually search font fonts with at least four available styles (usually regular, italic, bold, and bold italic), though searching for six+ generally nets more versatile options. They’ve also recently introduced a toggle to limit results to variable fonts.

Google Fonts also gives you the option of downloading and bundling the font files in your theme, or linking to the files on their CDN.

Font Squirrel

Font Squirrel is another long-established directory of open source fonts. It provides more granular filtering options than Google Fonts. This is a great resource if you’re looking for a typeface with a very specific feel.

Font Squirrel also offers a web font generator service where you can upload your own font files, and convert them to all the different formats you’ll need to embed the fonts into your theme.

Collections

Beautiful Web Type

Beautiful Web Type showcases a curated collection of high-quality open source typefaces. Instead of a list of fonts, this website actually demos them in action, allowing you to get a good sense of how each typeface looks and feels in context.

Open Foundry

Open Foundry is similar, focused on showcasing the best and newest high quality open source fonts.

You can type in your own text directly into the font listings to preview how it will look, and adjust the font size, line-height, and letter spacing of the text. You can also dive deeper into each typeface and see a type specimen.

Type Foundries

Velvetyne

Velvetyne is a collection of type designers who create and distribute open source fonts. Their philosophy and ethos resonate strongly with WordPress’ own.

Looking for a striking, experimental, or overall fun typeface to use in your next project? Velvetyne’s got your back.

Collletttivo

Collletttivo is another collection of individual type designers who release open source fonts under the same foundry. Their fonts feel punchy, and eye-catching, and many push the envelope of modern typography.

League of Movable Type

The League of Movable Type is the oldest open source font foundry, opening its virtual doors in 2009. This group was my introduction to web type. They offer a diverse array of high-quality typefaces ranging across many different styles.


Pairings

If you’re looking for somewhere to start, here are seven hand-picked open source font pairings you can use in your next theme design. I’ve shown each in a potential context so you can get a feel for how the pairings could work in action.


Luiss Serif & Luiss Sans

Luiss Serif and Luiss Sans by Antonio Pace showcase the beauty of font families. Designed with similar characteristics and proportions, these sans and serif typefaces match beautifully.

While versatile, I think using this pairing in a theme meant for longform text will help it shine brightest.


Ribes & Subjectivity

This font combination will infuse your theme with funky, retro vibes.

Ribes by Luigi Gorlero takes inspiration from the ’50s funk and jazz aesthetic. I love how the horizontal slant of the counters make the typeface look like it’s squinting at you.

Subjectivity is a display geometric typeface by Alex Slobzheninov. Its funky qualities play well off of Ribes. Generally, display faces are not suited for longform text, and that’s also the case here.

Use this combo in your next landing, splash, or marketing page theme design.


Mazius & Montserrat

Mazius is a gorgeous calligraphic serif by Alberto Casagrande, featuring not one, but two italic styles (the second of which is shown in this demo).

Montserrat by Julieta Ulanovsky has been around for a while, but was redrawn and expanded in 2017 with new weights.

Mazius works great for large headings, while Montserrat is versatile enough to take up the slack for smaller headlines and all body content. This pairing works well for any theme needing a just touch of elegance.


Facultad & DM Sans

Facultad is a sans serif typeface designed by Andrés Torres for the Faculty of the Arts at the University of Cuenca. Its calligraphic construction, wide counters, and generous x-height make Facultad a great choice for any modern academic news or magazine theme.

With its even, round shapes, DM Sans by Colophon pairs well with Facultad because of its differences. Its geometric qualities draw more attention to Facultad’s interesting calligraphic details.

Together, the pairing feels warm and inviting, while also strikingly smart.


Le Murmure & Compagnon

Sometimes you need to let some personality shine through. This pairing is bold and unconventional, but with two typefaces from Velvetyne, it might work for your next personal portfolio theme.

Le Murmure by Jérémy Landes was designed for the French design agency Murmure. This condensed titling font reminds me of the interesting angles achieved when you squeeze a handful of pipe cleaners. Only, you know, cooler.

Compagnon is a family with five different styles, inspired by old typewriter specimens. It’s super funky and fun to play with. If you use it, you’ll want to make sure your theme supports editor styles; this is a font that needs to be live-previewed.


Big Shoulders Text & Space Mono

Big Shoulders Text is a condensed sans-serif typeface by Patric King, created for the City of Chicago’s Brand Standards and inspired by “Chicago’s multiple histories in railway transport, journalism, advertising, and public political action.”

Space Mono was designed by Colophon for Google Fonts. It was designed for headline and display type, but I think it can be safely used for body copy if your size is large enough and your text sparse enough. So: okay for things like restaurant menus, bad for longform.

Combined, these typefaces remind me of old offset printed menus and the newer hipster styles that harken back to them.


Ibarra Real Nova & Inter

Ibarra Real Nova is an elegant serif typeface, designed by José María Ribagorda and Octavio Pardo based on 18th century Spanish type.

Conversely, Inter by Rasmus Andersson is a highly readable modern font created specifically for screens.

In this pairing, Ibarra Real Nova sets the overall elegant and classical tone, with Inter as a supporting actor. Use in any theme with a flair for the dramatic.


I hope these provide some inspiration to all you themers out there. If you use any of these font pairings in your next theme, let me know! I’d love to check them out 😁

Author: Mel Choyce

Boston-based WordPress core contributor and craft beer fan. I design stuff at @automattic.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s