The Best Free Fonts for Websites

One of the best ways to add a personal touch to your website (especially if you’re customizing a template) is to add a custom font. And while there are a lot of incredible premium fonts in the world, the internet also has a few great free font resources.

Google Fonts, Font Squirrel and DaFont all house a variety of free fonts. But with thousands of fonts to choose from, it can be challenging to find quality fonts that work well on websites. Not all fonts are crisp enough to work well at large headline sizes and not all fonts are easy to read as blocks of text (body copy).

Our team pulled together a few tried and true favorites we use in many of the templates we create.

The Best Free Headline Fonts

Headline fonts are often a place to really add character to your site. The fonts tend to be larger, and used less frequently, so while it’s still important that they’re legible, since they’re used for shorter bits of text, they don’t need to be quite as readable as body copy fonts. When choosing headline fonts, we look for well drawn fonts that don’t feel too clunky when displayed at a larger size. We love using serif fonts but sans serifs (and even, used sparingly, scripts), can work here too.

Here are a few of our favorite free headline fonts:

Sources: Cormorant Garamond | Playfair Display | Noto Serif Display | Nanum Myeongjo | Sofia Pro | Argesta | Antonio | Didonesque Roman | Butler | Emberly | Restora | Fogtwo No5 | Loki | Kenfolg

The Best Free Body Copy Fonts

When it comes to choosing a body copy font, the key is to make sure it’s easy to read in paragraph format. Some of the fonts we listed above (such as Butler or Loki,) look lovely when used for a few larger words, but if you were to use them for body copy, the light weight and the extended serifs would make the text very challenging for the reader.

If you’re going to use a custom font for body copy, we recommend trying to stick with a Google font as they tend to load more quickly than other fonts. If you have a lot of body copy on a page, this is important. Site builders such as Showit and Elementor already come connected to the Google fonts library.

We’ve listed a few of our favorite body copy fonts below:

Sources: Cormorant Garamond | EB Garamond | Montserrat | Nanum Myeongjo | Sofia Pro | Questrial | Open Sans | Raleway | Libre Baskerville | Lora | Crimson Text | Cardo

The Best Free Script & Handwriting Fonts

We’re big fans of using scripts and handwriting fonts as accents on websites. While it’s best to keep any text used as a script to just a few words (to keep it easy to read), out of all the fonts we’ve listed above, scripts definitely add the most personality to a site.

When it comes to scripts, this is probably the area I would most consider investing in a premium font. While we did track down some great free options, premium scripts tend to include better ligatures and a lot more variety. We rounded up some of our favorite scripts in this post.

But if you’re just experimenting or you’re on a budget, check out a few free options below:

Sources: Rolest | Barcelony | Cervantis | Black Signature | Monita | England Hand | Parisienne | Adelia | Southam | Billion Miracles | Charlotte Southern | Retro Signature | White Angelica | Halimun

Implementing Custom Fonts on Your Website

If you’re using Showit, Google fonts are already built into the platform and can be set when you adjust your site’s font settings. You can also upload custom fonts to Showit.

For a detailed look at using fonts in Showit, check out our Intro to Showit video (4 minute mark). If you need to convert a custom font before uploading, check out this tutorial.

If you’re using WordPress/Elementor, Google fonts are also built into the software. But if you want to upload custom fonts, you’ll need to generate a few different versions of the font. You can watch a tutorial here »