Beautiful Open-Source 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 work is shown here with some inspiring examples: https://beautifulwebtype.com/
What are Web Fonts?
Fonts come in various formats, with many pre-installed to our Windows/Mac computers and our phones and tablets. 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 Google Fonts or Adobe 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 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 FiraGO
This site uses Albert Sans by Andreas Rasmussen from a-foundry.net and is available on GitHub. We use Work Sans on another one of our websites and that font was originally commission by Google. 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. Sadly a lot of Google fonts don’t contain the OpenType features like fractions, alternative characters, different ligatures etc. that can help web type look beautiful.
Downloading the font files from the source (like the foundry’s website or Github account) often fixes it. These small tweaks to website fonts can really help refine web designs and make web type easier to read.
Low Cost, High Quality Fonts
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.
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.