in Design

40 Amazing Fonts You Need To Know About

Picking out the best font for your website is beyond any shadow of a doubt one of the essential steps of your design process. When choosing the fonts you will work with, there are a number of things you should take into consideration.Among them you will find the ever present problem of cross browser compatibility, the way a font is displayed on different devices and even different operating systems that might have subpixel rendering turned off (see Windows XP).

Presently, there are a number of ways to integrate non-system fonts into your website. Amongst the least complicated and least expensive are Google Web Fonts and the @font-face rule, but there are other paid methods like Typekit, Web Fonts, Fontdeck or WebINK that can be taken into consideration. The trouble with choosing between paying for your font needs and going with some of the free fonts available out there is the fact that there are so damn many choices available. It’s quite difficult to sort through all the plain, non-impressive fonts available across the Internet and find the ones that would truly make you stand out. This is where using a paid service comes in handy, because then you can at least be assured that the selection you’re browsing through fulfills a certain level of quality.

Moving on from the monetary aspects of choosing your font to the technical issues, the basic two implementation models you can use to add non-system fonts to your websites are:

1. Web font embedding services

Services like Google Web Fonts or Typekit are basically systems which enable developers to use the fonts that they host on their servers. Like I mentioned earlier, Google Web Fonts is free to use and has no traffic or domain limits. In addition to this, Google Web Fonts allows you to download a dektop version of the fonts you’ve chosen to use, in order for you to be able to start using them as soon as you kick off your design process. Typekit, on the other hand, will invoice you on the number of domains where you are using the font or by the site’s monthly traffic.

We’ve rounded up the best 20 fonts to use with Google Web Fonts.

1 2

3 4 5 6 7


Roboto Slab

9 10 11 12

Gravitas One



14 15

Fjord One




Gentium Basic



19 20

2. Embedding fonts using @font-face rule

@font-face was a CSS2 rule that used to be deprecated but has enjoyed a resurge in CSS3 and benefits from being supported by most modern browsers. To put it plainly, a web fonts is a customized font that is supported across a variety of browsers and has one of the following formats: TTF, WOFF, EOT and SVG. All the code that handles the way your font looks will be in your stylesheets and you will have complete control over it. The most popular platform that supplies fonts to be used with @font-face is Font Squirrel. Aside from an impressive collection of fonts, Front Squirrel also offers the “@Font-Face Generator” tool which allows you to convert your desktop font into a format that is appropriate to be used in all your web projects.

Here’s our selection of the best 20 fonts that can be used with @font-face.

21 22 23 24 25 26 27 28 29 30

Alex Brush


Museo Sans 32


Chunk Five




League Gothic 3


Caviar Dreams36

Dancing Script OT37

Learning Curve Pro




Good Dog



I read, I write, I sleep.