DesignLovr

Web Typography was for a long time the black sheep of web design; Verdana, Arial and Georgia everywhere.

Even though there were some approaches to the issue like sIFR, FLIR or cufón, which are often complicated to install and bring up new issues (non-selectable text, flash and or javascript required), the perfect solution wasn’t found yet.

That’s why @font-face is one of the most anticipated CSS3-features. It allows you to link to fonts in your CSS-file, just like you would do it with an image, and use them like regular fonts the end user has installed on his computer.

One of the big problems that comes along with @font-face is that every savvy user is able to download the fonts that are used – logically font foundries and creators don’t agree to the free distribution of their fonts.

That’s why we collected 30 excellent and free fonts that can be used with @font-face without any license or copyright issues. The fonts feature all sorts of styles (serif, sans-serif, grungy, script, comic, blackletter, etc.) and you should be able to find something fitting for most web project you will work on.
Of course you can use each of these fonts just as well for other purposes than the use with @font-face.

Airstream

Beautiful ES

Blackjack

BodoniFLF

BonvenoCF

Brankovic

CalligraphyFLF

CartoGothic Std

ChunkFive

Cicle

Comfortaa

Danoise

Du Cahier

Dubtronic

Edition

Forficula

Gentium

Geo Sans Light

Gregorian

HenryMorganHand

Jr Hand

Justus

Kulminoituva

LemonChicken

Rope

SedonaScript

Thyromanes

Tiza

UpperEastSide

Walkway

A big part of the fonts featured in this post are available on Font Squirrel, which offers a @font-face section on their web site, where you can find 100+ fonts that can be used with @font-face.

Font Squirrel offers these fonts in the form of so called @font-face kits, which include different font formats for different browsers and a preformatted CSS-file.

You can also find a @font-face generator, which allows you to upload an Open or True Type font (you have to make sure that you can use it for @font-face) and generates the files that are contained in their @font-face kits (3 different font formats and a CSS-file).

If you want to manually code the @font-face related CSS for your web site you have to define your new font-family first with the help of @font-face and then call it as you do usually with font-family.

Have a look at our code example:

@font-face {
  font-family: ChunkFive;
  src: url('fonts/ChunkFive.eot');
  src: local('ChunkFive'),  url('fonts/ChunkFive.woff') format('woff'),  url('fonts/ChunkFive.otf') format('opentype'),  url('fonts/ChunkFive.svg#ChunkFive') format('svg');
}

h1 {
  font-family: ChunkFive, „Impact“, sans-serif;
}

Internet Explorer requires .eot (Embedded OpenType), Firefox requires either .otf, .ttf or .woff (Web Open Font Format), Safari is fine with .oft and .ttf and Chrome, Opera and the iPhone require .svg (based on the Scalable Vector Graphics format). There is a multitude of converters out there that will help you to get every font-format you need.

Besides Internet Explorer, which supported @font-face since IE5 only the latest version of above browsers support @font-face, that’s why it is essential that you define a web safe font as fallback as shown in our code.

If you want to find out a little bit more about @font-face I also highly recommend you to read CSS @ Ten: The Next Big Thing by Håkon Wium Lie on A List Apart.

Now let’s go and make the web (even) more beautiful!