Beautiful Open-Source Typefaces and Fonts for Web Design

As I’ve been moving all my websites and client websites away from font services due to their licensing changes or privacy issues, I’ve discovered a thriving scene of high quality, open source fonts that can be used on the web!

Open source software (including fonts) is a way to avoid complex and expensive licenses and the increasing number of monthly subscription. There’s some amazing Typography work out there and some of the best fonts are shown here with some inspirational examples: https://beautifulwebtype.com/

What are Web Fonts?

Fonts come in various formats, with many pre-installed to our Mac or Windows computers and our phones. However each operating system or device has different fonts. To make things more consistent, us web designers use ‘web fonts’ that are loaded from your website hosting or third party services like Adobe Fonts or Google Fonts. These web fonts can be free or paid, and the quality varies wildly.

Who Makes These Fonts?

Some of these fonts were commissioned by tech companies for their products, including Mozilla (developer of the Firefox web browser, amongst other products) in the case Fira Sans. Read more about this long term project and how the font became open source at the creator’s website here: https://bboxtype.com/typefaces/FiraSans/

open source font fira GO

Open source font FiraGO

We use Work Sans on this website and it was originally commission by Google, and other fonts were created or commissioned by individuals, students, type foundries and big companies like Adobe or IBM.

Google Fonts and OpenType

One of the go-to sources for high quality web design fonts is Google Fonts. However as mentioned in this blog, Google Fonts are not GDPR compliant. While replacing fonts on various websites, I’ve found that the ‘Google web fonts helper’ that helps us self-host fonts has been stripping out the OpenType features like fractions, alternative characters, different ligatures etc.

Downloading the font files from the source (like the foundry’s website or Github account) fixes it. These small tweaks to website fonts like the cleaner ‘a’ and ‘g’ on this site really help refine web designs and make web type easier to read.

Low Cost, High Quality Fonts

I feel I should mention FontSpring too, as they offer simple, cost effective licensing for some awesome desktop and web fonts. There are some free fonts available from their site as well as demo fonts to try out the full range of faces. The paid fonts are one-off fee with no recurring charges from what I can see, and their support team was quick to reply when I asked a clarifying question about their free fonts.

https://www.fontspring.com/

Summary

A huge number of open source fonts are available for offline and web design use, with many of the best ones collected together with examples at https://beautifulwebtype.com/ With the cost of living increasing and companies turning the screw with monthly costs, restrictive licences or invading our privacy to offer free fonts, these open source fonts are a great way to break free from all of that.

Close .