DesignLovr

30 Beautiful and Free Fonts You Can Use with @font-face

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

Airstream

Beautiful ES

Beautiful ES

Blackjack

Blackjack

BodoniFLF

BodoniFLF

BonvenoCF

BonvenoCF

Brankovic

Brankovic

CalligraphyFLF

CalligraphyFLF

CartoGothic Std

CartoGothic Std

ChunkFive

ChunkFive

Cicle

Cicle

Comfortaa

Comfortaa

Danoise

Danoise

Du Cahier

Du Cahier

Dubtronic

Dubtronic

Edition

Edition

Forficula

Forficula

Gentium

Gentium

Geo Sans Light

Geo Sans Light

Gregorian

Gregorian

HenryMorganHand

HenryMorganHand

Jr Hand

Jr Hand

Justus

Justus

Kulminoituva

Kulminoituva

LemonChicken

LemonChicken

Rope

Rope

SedonaScript

SedonaScript

Thyromanes

Thyromanes

Tiza

Tiza

UpperEastSide

UpperEastSide

Walkway

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;
}

As you can see you have to define the url of every font-format manually.

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!

Share on Facebook Stumble this post Bookmark on Delicious

Similar Posts

20

Comments so far

  1. Cool! Keep up the good work and thank you for sharing.

  2. I will employ of some these principles…

  3. Alex Flueras says:

    Excellent article, thanks for sharing.

  4. Halis KAYA says:

    Thanks, Nice fonts

  5. Your website looks really good. Being a blog writer myself, I really appreciate the time you took in writing this article.

  6. Wow! Really cool collection! Thanks for sharing!

  7. ximi says:

    Thanks for all the kind comments so far!

  8. So far, I have not used @font-face on my sites. What about the size of fonts (I mean in kB)? And what about readability of these fonts if user resizes a web page (make it larger)? Are all of these web fonts of the same quality?

  9. thanx for the info. nice set of fonts

  10. Sivaranjan says:

    This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time.

    I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)

  11. marwa soft says:

    i like all of this fonts thank you
    marwa soft´s featured post: تحريك عقارب الساعه باستخدام css3 و jquery

  12. Henry Worden says:

    Thanks for the tutorial. Are you going to make a fresh CSS tutorial soon?

  13. david says:

    Beautiful es might be used on your wedding invitation. Doesn’it? I might download some styles for my iphone
    david´s featured post: Pr 3 package

  14. Thanks for this post it was a good read, do you have a twitter account that we can follow you on?

  15. CuppyHouse says:

    great collection

    Thanks a lot
    CuppyHouse´s featured post: Hát Karaoke- Yesterday once more – The Carpenters

  16. Very nice blog keep up the nice work guy

  17. Thanks for sharing. I really like blackjack.

  18. Hi there, i really like the HenryMorganHand especially the way only certain figures drop down like the number 3

Leave a Reply

CommentLuv Enabled