100 free @font-face fonts | Bypeople

100 free @font-face fonts

The term @font-face makes reference to a CSS rule that allows you to download a particular font from your server to a webpage so people are able to see it without having the font installed, in other words, we are talking about those typographic families or single fonts that are able to be used in different computers without having to be installed on a determined device. Until a few years ago, there were just a few font families that were readable from any PC, because they usually came installed in every PC, such as Arial, Helvetica and Verdana.

Today the range has became wider, allowing people to embed their favorite fonts to their websites by using a few code lines. On this article we will be reviewing some of the best free fonts ready for download that can be used along with the @font-face properties. These fonts will make your designs look the way they’re supposed to be from any computer. Also if you still want some more fonts we have selected the best fonts from Google web fonts and put them in a single place, Best web fonts extends your font library a bit more with the bests.


Icon by Iconshock.

How to implement @font-face?

When you have a font that you definitely want to implement in your website but you sense that not many people have it on their computers and you are not willing to change the font, it’s time to think about @font-face.

Implementing @font-face is very simple, here’s what you need to do:

@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);

That previous example works when you need to callback the font directly from the server and it has no special properties, such as bold or script, now we’ll show you a different example that works when you have a bold font and you are calling it from a server’s folder where dir-name is the directory’s name.

@font-face {
    font-family: DeliciousRoman;
    src: url(dir-name/Delicious-Roman.otf);

And now the code line we use when implementing a TrueType font.

@font-face {
       font-family: Calibri;
       src: local("Calibri"), url("fonts/calibri.ttf") format("truetype");
       font-weight: normal;
       font-style: normal;

body {
       font-family: Calibri, sans-serif;

And a very important example, here’s what you need to do when working for Internet Explorer.

<!--[if IE]>
<style type="text/css" media="screen">

src: url('Fontin-Regular.eot');


@Font-Face Generator

The guys from Font Squirrel released this amazing tool that allows people to edit their OpenType and TrueType fonts and male them compatible with @font-face. The tool offers a series of complements that helps people to edit their fonts the way they prefer to.

The generator will give you a compressed file with several files that will help you to implement the chosen font as @font-face.


You can find this great tool at http://www.fontsquirrel.com/fontface/generator

Fonts for digital and web devices

OK, now that we know how to implement @font-face and setup your custom fonts to support it, let’s see an extended roundup featuring 100 of the most beautiful, elegant, useful and simply great free fonts that you can adapt to @font-face.

When choosing a font for your web designs, there are several things to take into account, such as the size, resolution, caliber and aesthetics. In terms of size, you have to remember that the same font will often see smaller on a Mac screen than in a Windows one, so always work to guarantee a good reading in Mac, because that will ensure the reading on a Microsoft PC. We suggest you to use fonts above 14 pt to be easy to read for everyone.

The resolution aspect teach us that we should always work at 72 dpi when working for digital devices, but you must know that most of Apple screens are set up for 72 dpi, while the Microsoft monitors usually are made to work with a 96 dpi resolution. If you move something made at 96 dpi to a 72 dpi monitor, it will look larger than in a 96 dpi monitor, so be careful with this aspect.

Regarding the caliber, it’s not the same to use a Sans Serif font with a Script property than a Serif font with Bold, many changes will occur if you play with these values, no matter if you’re using the same type of font. Usually bold works for larger texts. Try to always use Sans Serif fonts when your content is going to digital devices and computers.

And with the aesthetics the theme gets more subjective. We only suggest you not to use fonts with many ornaments, small tracking or light colors over light backgrounds. Finally, do not rasterize fonts, because if you do that, people won’t be able to rescale it.

1. Geo Sans Light


This font designed by Manfred Klein is a lovely sans serif font to use in web design. Legible letters, good tracking and structure.

2. Old Sans Black


Another contribution by Manfred Klein, very straight traces and nice legibility, it kind of reminds me to the classic font Impact.

3. Nevis


Designed by Ten by Twenty, this sans serif font is ideal for web applications thanks to its strong, angular and easy to read design.

4. Quicksand


Quicksand was launched on Typophile. Although it’s a sans serif font, it has a lot of serif insinuations which makes it beautiful.

5. Graublau Sans


Both Graublau Sans Web regular and bold were designed by Georg Seifert. The fonts are optimized for screen use and support a wide range of character encodings.

6. Diavlo


Diavlo is a sans serif font with 5 different weights, nice font if you’re looking for something different.

7. Fontin Sans


Jovanny Lemonad, who received an award for his excellence in the type design contest Modern Cyrillic 2009 is the mind behind Fontin Sans, another great font.

8. Delicious


Delicious is fantastic, it’s a new style in sans serif design, very helpful for implementing in tech and TV websites.

9. Junction


Junction is and attempt of mixing the properties of both the serif and sans serif styles into a good looking and clear font.

10. Days


Alexander Kalachev is the person behind this font, tech and industrial could be two good words to describe it.

11. Chunk


Chunk is an ultra-bold sans serif typeface that uses the old style of the American newspapers and propaganda.

12. Blackout


I really like this kind of fonts that eats all its holes, maybe it’s psychological but I really like it.

13. Anivers


The name Anivers comes from the word anniversary, it was originally designed to celebrate the anniversary of Smashing Magazine.

14. Kaffeesatz


Made by Yanone, despite its hard to pronounce name, this is one of the must successful fonts of the recent years, check it out for yourself.

15. Dekar


Dekar free font is an OpenType font applicable for different types of design, thanks to it’s lite and easy to read style.

16. Sertig


Elegant without being serif, this font works great for your digital works.

17. Cicle


A 21th century font, designed to compete with the design standards of these days.

18. Museo


This font started as a fascination for the letter U, which then lead to the creation of the remaining characters.

19. Josefin


This vintage-looking font it’s perfect for web design due to its light stroke and wide kerning.

20. Hattori Hanzo


This font was released a time ago and it’s one of the newest fonts of this countdown.

21. Raleaway


Raleway is an elegant sans-serif typeface, designed in a single thin weight, good selection for your digital creations.

22. Telegrafico


This is a nice font from the DeviantArt bank, you should check it out.

23. Bebas


Industrial design, this font uses a strong hierarchy similar to other fonts such as Impact.

24. Code Free Font


Great font, helpful for designs related to architecture and engineering thanks to its geometric shapes and spacing.

25. League Gothic


League Gothic is a revival of an old classic, Alternate Gothic; it’s great to see this revamping of this font.

26. Cantarell


Cantarell is a contemporary sans serif designed for on-screen reading; in particular, reading web pages on an HTC Dream mobile phone.

27. Franchise Bold


Another Impact-like font with a modern touch, ideal for branding and web design applications.

28. Dejavu Sans


Dejavu it’s a font family based on the Bitstream Vera Fonts, with more characters than the original.

29. Cartogothic STD


Inspired on Myriad Pro, this is another good font to use in your blog and / or website.

30. Eau Sans


Designed in 1992, Eau takes its name from the French word of the same name that means “water” , this is a refined typographic design.

31. Bonvenocf


This font designed by Barry Schwartz takes a minimal look to the sans serif designs and places into a beautiful design.

32. Comfortaa


The credit for the customization of this font belongs to Johan Aakerlund, this font has certain resemblance with Arista.

33. Walkaway


Clear character structure behind the construction of this font, recommendable for chill out websites.

34. Andika


Another good sans serif font, this one separates itself from the more straight and geometrized fonts.

35. Zag Regular


A reduced kerning and a major focus on the height; this is definitely a good choice for creating titles and headings.

36. Sansumi


Designed by Manfred Klein Fonteria, this font reduces its ups and highs to almost a single character box.

37. Qarmic Sans


This is one of the many attempts that typography designers have made to revamp the famous Comic Sans.

38. Helsinki


Helsinki is a refined version of the Vic Fieger handwriting, altered to appear more similar to traditional comic book lettering.

39. Matiz


Designed by Beycan Çetin, Matiz is a cute font to implement on your web designs.

40. Orbitron


Optimus, we have found the old spark, it wasn’t inside a glass, it was inside a great font.

41. Anonymous Pro


Mark Simonson is the person behind this lovely font, it tends to be serif but with all the qualities of the sans-serif group.

42. Bitstream Vera Sans Mono


Simple, elegant, this is for sure a good font selection to resolve a web design issue.

43. Droid Sans Mono


Droid’s a font family created by Ascender Corporation for use by the Open Handset Alliance platform, Android.

44. Inconsolata


This is a font designed for digital devices and websites, a fine selection for programmers and developers.

45. Caviar Dreams


Elegant and retro are two of the fittest words to describe this nice looking font.

46. Enigmatic


Outstanding font, strong characters, great legibility, definitely a top choice for you designers.

47. Negotiate


Another nice font, completely different to those lite looking fonts that many people like.

48. Qlassik


I’m fascinated with the letter “g” of this font family; you need to check it out.

49. Text Gyre Adventor


TeX Gyre Adventor it’s a sans-serif font family based on the URW Gothic L family distributed with Ghostscript.

50. Tiresias Infofont


Tiresias was one of the must fascinating fonts of the 90’s, designed by David Carson, it’s still a great choice for graphic designers.

51. Tuffy


Designed by Thatcher Ulrich, this is a standard but still well done sans-serif font.

52. Ubuntu Titling


As the description on the original source says, this version by Christian Robertson of betatype.com is much nicer and includes capitals and small cap alternatives. Highly recommended over the older Ubuntu-Title font.

53. Winterthur Condensed


If you’re looking to place a great amount of information inside a small area and you don’t want to sacrifice the design, this font is a good choice..

54. College


This is a super classical font, you can see it every year on the college teens that are proud of leaving high school and make it to college.

Fonts for printing and similar media

Now that we have studied some of the best fonts to implement in digital design, let’s talk about print media. We are going to study those fonts that work the best to be read in printed medias and also safe ink in many occasions.

Usually the best font choice that you can make to work in printing is serif fonts, because they’re easy to read in small spaces when the amount of text is huge, just take a look at your local newspaper and you will notice what we’re talking about.

In terms of resolution, you can use a 150 dpi for newspapers, that will make the cut properly, but if you’re working in a magazine such as Rolling Stone, it’s imperative to work with a minimal resolution of 300 dpi. Do not use more than 4 different font families in one page, and even that quantity it’s excessive, try to make your print creations as clean and simple as you can.

Sans-serif fonts can work with titles and short phrases, so the previous fonts of this countdown can provide you a great assistance at anytime. OK, now we proceed looking at some of the nicest fonts for print medias that also can work with the @font-face property.

55. Chantelli Antiqua


This kind of fonts are quite easy to read thanks to its serif design, this particular font has a medieval look that for sure can work in many print publications.

56. Kingthings Calligraphica


Kingthings Calligraphica is based on a calligraphic lettering; it could be a saturated choice for clean interfaces and publications.

57. Gothic Ultra OP


A serif font that evocates a classic style but, due to the subtle grunge texture, becomes modern without losing its line.

58. Tangerine


This font was designed by Toshi Omagari, the small caps characters are simply beautiful.

59. Gladifilthefte


Retro, elegant and strong can be some of the fittest words to describe this font.

60. Fontleroybrown


I really like this font, specially the small caps characters, a personal selection.

61. Contra


No, it doesn’t have a relation with the classic arcade game; it’s just a beautiful serif font.

62. Crimson Text


Simple and cute serif font designed by Sebastian Kosch.

63. Garton


Designed by David Rakowski, this is a different style on serif fonts that keeps the essential objects of a good typographic design.

64. Linux Libertine


We like to thank Philipp Poll for posting this nice serif font.

65. Tallys


According to its description, Tallys is a font that is one degree slanted and has large caps, a small x-height and long ascenders. It comes with hybrid numbers and a complete character set.

66. Fontin


Fontin font was designed to be used at small sizes. It has loose spacing and the x-height tall. This font is family with the already listed Fontin Sans.

67. Vollkorn


Volkorn it’s classic, elegant and ready to be implemented on your print designs.

68. Jura


Jura is a distinctive and yet readable serif typeface, suitable for headings and body content on print publishing.

69. Ripe


Geometrized, beautiful and clear, this is one of the nicest fonts of this countdown.

70. Andron Freefont


Easy to read, especially for print media, this font designed by Andreas Stoetzner it’s for sure a good choice.

71. Thryomanes


This is a very similar to the font to the always quoted Times New Roman.

Fonts for corporative design and art pieces

Finally we have reached the last section of this countdown, we’re talking about those fonts that are either sans-serif or serif but beyond that, have something cool that makes them ideal to use on artworks, logo creations and general corporative design.

Now we are going to show you some good examples of typography used so you can get some inspiration and then the final part of this roundup, some of the finest fonts that will make your design work much easier and well made.

If you want to check out an amazing logo selection that will show you how to proper use a font inside a corporative design, visit http://www.fuelyourcreativity.com/50-kick-ass-logos-for-inspiration/, a very recommended design article. Now we continue with the rest of this countdown.

72. Blackjack


A super calligraphic font, ideal for corporative design focused on familiar companies, feminine sites and oldies.

73. Brankovic


Man this is a great font, I beat that many skate shops will be happy to get a logo with this font included.

74. Forficula


I’m not sure what’s with this font but I really like it, so I decided to put it on this part of the list.

75. Rope


What amazes me the most about this font is the fact that is suitable for @font-face implementation.

76. Tiza


Tiza rules, it feels like if you were writing over a dashboard from one character to the other.

77. Xenophone


This font has an interesting description: The letters in Xenophone were created from hand-drawn figures in which American coins were traced around to create curves and circles. Some capitals are meant to resemble symbols from the International Phonetic Alphabet.

78. Daniel


Daniel Midgley managed to create a gorgeous handwritten font, ideal for many corporative designs.

79. Clutchee


This font has definitely a Bauhaus influence on it, pretty cool to use on your typographic artworks.

80. Pincoyablack


I don’t know about you guys but this font makes me feel like I’m inside an Austin Powers film.

81. Vanilla


This font is amazing, it’s so pretty and suitable for corporative designs concerning kids and happy themes.

82. Yukarimobile


These type of fonts are usually good for technology companies that are looking for a new identity.

83. Quick End Jerk


This is for sure a nice font for a teen clothing line, keep that in mind you future fashion designer.

84. Elliotsix


Perhaps this font works for cuisine places or handcraft shops.

85. Good Dog


I think this font will look great inside a pet store or something like that.

86. Trashhand


I have recently seen this font in many corporative designs, perhaps you should take a look on it.

87. Snickles


This font can be also on the print media section, but it’s also a good selection for corporative design.

88. Minotaur


Another Bauhaus inspired font, great for alternative and contemporary designs.

89. Louisianne


Amazing font to implement in corporative design, classical, friendly and elegant.

90. Rothman


Rothman works for large-name companies that need to make simple and elegant images.

91. Black Rose


The small caps characters of this font are really great, take some time to check them out.

92. Lobster


One more font that you need to have on your library.

93. Quigleywiggly


Cute serif font, suitable for reading or even graphic design work.

94. Shardee


One more serif type face for the countdown, remember that many fonts work for more than just one kind of use.

95. Junkos Typewriter


Many independent film companies like to use this type face on its logo, nice selection for designers.

96. Reklame Script


This font is a revamping of the classic 60’s posters, nice for a vintage design.

97. Sybil Green


Super girly looking font, suitable for many applications.

98. Carousel


Kind of Arabic, serif looking font, Carousel is an interesting type face selection.

99. Sorbet


Light font, ideal for logo designing, a recommended reference.

100. Giant Head OT


Heavy font, suitable for logos that accept artistic designs.

OK guys, that’s it for this countdown, now we have an extended library of type faces that are suitable for the @font-face implementation. Hopefully this article will remind you that there’s many more types than Arial and Georgia. Let’s know if you missed some of your favorite times, we want this community to grow with your contribution, thanks for reading this article and, see you soon.

Related Deals

Related Posts