× Terms of Use Privacy Policy

Take me back!! I want my CSS!! Click me to get back :)

×

READY FOR A NEW CAREER?

But not sure where to start? Find out if a tech career is right for you.

TAKE THE 3-MINUTE QUIZ

10 Free Web Fonts That Will Bring Your Site To A New Level

A web font can make or break a web site. You can quickly go from “Wow! This site is great and I can read everything clearly!” to “What language is this? Is that an a or an e?” Your font is a cue for readers about your brand, and a determinant in how engaging your business will be to site visitors. In choosing the right font, it’s important to keep in mind how titles will look, size, leading (the space between the lines), tracking (the space between each character), color, etc., That’s a lot of pressure!

If you are just getting started in the fonts world, here is a little bit of fonts 101 to make sure you’re on the right track:

  • Serif vs. Sans Serif Fonts: Serifs are the small lines attached to the end points of a letters. (See how this “L” has tiny lines at the top and at each corner on the bottom?). Serif fonts are “old-school” typography and are considered especially suitable for print. They work well for really long articles that you see in magazines and those ancient paper booklets known as newspapers. Sans serif fonts have become the standard for digital/web design. They look cleaner are more simple and are are considered to be easier to read online.
  • Unless you are an expert at fonts, start with using a maximum of two for your site. Too many fonts can get overwhelming to your readers, fast!
  • If you are building a business site, a more traditional font is key for building your site. If it is for a creative business, you can experiment more. If it is personal, consider a hand-written font. This site has some great tips on which fonts are good for which sites.

In the meantime here are some great ones and they are free (and if you want EVEN MORE free fonts, just start searching for free fonts. There are so many great ones)!

Garamond


You can’t go wrong with a Garamond! According to Google, Garamond’s fonts have set a milestone, on which font designers have been recurring ever since. This font is a classic.

EB Garamond is an open source project to create a revival of Claude Garamond’s famous humanist typeface from the mid-16th century.

To add Garamond to your project just drop the following inside your <head> tag (before you load the style.css document):

<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>

And then add the following to your CSS wherever you want to use it:

font-family: 'EB Garamond', serif;

For example:

h1 { font-family: ‘EB Garamond’, Arial, serif; font-weight: 400; }

Ostrich Sans

ostrich-sans-5

A great simple, clean font, Ostrich Sans still has a lot of detail. For those creative businesses we talked about earlier, a great choice!

Download it here.

Lato


Lato is part of the sans serif family created by Polish designer Łukasz Dziedzic, Lato is published under the open-source Open Font License.

To add Lato to your project just drop the following inside your <head> tag (before you load the style.css document):

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

And then add the following to your CSS wherever you want to use it:

 font-family: 'Lato', 'sans-serif;

For example:

h1 { font-family: ‘Lato’, Arial, serif; font-weight: 400; }

 

Ubuntu


Besides just sounding cool, this font was developed specifically with the purpose of benefiting the wider free software community. Users are encouraged to modify the font to make it better.

To add Ubuntu to your project just drop the following inside your <head> tag (before you load the style.css document):

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700,700italic' rel='stylesheet' type='text/css'>

And then add the following to your CSS wherever you want to use it:

font-family: 'Ubuntu', 'sans-serif;

For example:

h1 { font-family: ‘Ubuntu’, Arial, serif; font-weight: 400; }

Lavanderia

lavanderia
Look for Lavanderia on fashion blogs – it has become a font of choice. Cool fact: It is inspired by laundromats in San Francisco’s Mission District.

Download it here. You can name your price for this font so if you want it for free, you can name $0.

Neuton


Neuton, similar to Garamond, is an instant classic. This font looks awesome on mobile because of its larger letter size, yet compact width.

To add Neuton to your project just drop the following inside your <head> tag (before you load the style.css document):

<link href='http://fonts.googleapis.com/css?family=Neuton:200,300,400,700,800,400italic' rel='stylesheet' type='text/css'>

And then add the following to your CSS wherever you want to use it:

font-family: 'Neuton', 'serif;

For example:

h1 { font-family: ‘Neuton’, Arial, serif; font-weight: 400; }

Actor


The Actor font is not just used by actors (sorry, had to do it!). However, do note that it has a very high x-height that requires more line spacing, and also features old-style figures (look at the numbers 6 and 9 in particular).

To add Actor to your project just drop the following inside your <head> tag (before you load the style.css document):

<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>

And then add the following to your CSS wherever you want to use it:

font-family: 'Actor', sans-serif;

For example:

h1 { font-family: ‘Actor’, Arial, serif; font-weight: 400; }

Vollkorn


Although Volkorn kinda sounds like that race of people in Star Trek, it is just a font. And a slightly whimsical one for you to try!

To add Volkorn to your project just drop the following inside your <head> tag (before you load the style.css document):

<link href='http://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

And then add the following to your CSS wherever you want to use it:

font-family: 'Vollkorn', serif;

For example:

h1 { font-family: ‘Volkorn’, Arial, serif; font-weight: 400; }

Abel

Abel-Regular is a staccato sans serif font. This one is especially great for headers.

To add Abel to your project just drop the following inside your <head> tag (before you load the style.css document):

<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>

And then add the following to your CSS wherever you want to use it:

font-family: 'Abel', sans-serif;

For example:

h1 { font-family: ‘Abel’, Arial, serif; font-weight: 400; }

Infinity

Infinity-Free-Font
A fun, cute font, Infinity has “personal blog” written all over it. Because of it’s design-y nature, it should be used mostly for logos, small headers, or short quotes.

Download it here.

What’s your favorite font? Let us know your favorites in the comments!

Your email address will not be published.

3 comments

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.