30+ Awesome Free Fonts for Kick-Ass Web Designs

30+ Awesome Free Fonts for Kick-Ass Web Designs

As we examined last week in our Font Replacement Review, new technologies have liberating web typography from the ordinary web safe fonts to a truly wide open horizon of new and bold and imaginative typefaces. It’s easier than ever to include your own custom fonts in a web design using various font replacement technologies. Today, we’ll review over 30 fonts that are worthy of your own font library.


Resource Roundup: Fonts for the Web

This is another in our series of “Resource Roundups“. We hope to provide a place for designers to find great quality resources (icons, fonts, textures, etc.) that stand out from the pack of ordinary junk-stock. All of these fonts are free to use in your own web designs, and we’ve hand selected some of our favorites.


Licensing Notes

A note on licensing: Each of these fonts that we’ve selected is free unless stated otherwise, but you’ll have to look at each individual packs’ licensing information to determine whether or not you can use them in commercial projects.

The League of Moveable Type uses the Open Type License, which actually has a goal of creating a completely open font environment on the web.

Most of the fonts from MyFonts.com include 1 or 2 ‘free versions’ which are awesome in their own right, but you’ll have to fork over some cash to get the entire library (some include as many as 30 different weights). Visit the buying page to grab the free versions.


Code

Code, is a high quality, fresh and clean font designed by Manual Kerning that looks awesome in it’s bold style. It is applicable for any type of graphic design – web, print, motion graphics etc and perfect for t-shirts and other items like posters, logos.

Free Web Fonts for Typography

Raleway

Here’s one from the incredible “League of Moveable Type” library, which you should bookmark instantly if you haven’t already. Raleway is an elegant sans-serif typeface, designed in a single thin weight. It is a display face that features both old style and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics, as well as a stylistic alternate inspired by more geometric sans-serif typefaces than it’s neo-grotesque inspired default character set.

Free Web Fonts for Typography

Goudy Bookletter 1911

Another from The League of Moveable Type. This throwback font brings instant authenticity and a sense of tradition to any design. These are letters that take command of the space around them; notice, for instance, the bowed shapes of the v and w.

Free Web Fonts for Typography

Nevis

Nevis is a strong, angular typeface and is ideal for headings, text, buttons and everything in between.. It’s assertive and bold, but manages to retain a friendly tone, and looks especially good when used in all caps.

Free Web Fonts for Typography

Jura

Jura is a elegant serif typeface of narrow proportions with distinguishing details. The rounded, wedge shaped serifs offer a more contemporary feels than many serif fonts, while maintaining legibility even at small sizes.

Free Web Fonts for Typography

Anivers

Anivers is robust and rigid, forgiving, flexible and elegant … and also suitable for a broad use: from a stationery to a poster headline. From an intro in a magazine to a base for a logo.

Free Web Fonts for Typography

FR Hopper

FR Hopper is a sans based on geometric forms still having a friendly personality. It is inteneded for mid-length texts, captions, titles and almost any other occasional use – posters, flyers and even for web sites. The 430 and 431 weights are free and include a commercial license!

Free Web Fonts for Typography

ST Ryde

St Ryde is a humanistic sans-serif with a slight touch of a script typeface. The most significant aspect of the typeface is the combined sharp and round treatment of the stroke endings. The complete Ryde Family contains five weights including real matching italics, so you can choose from thin, light, regular, medium and bold. The standard version comes free and includes a commercial license.

Free Web Fonts for Typography

Indento

Indento is a multi-purpose modern geometric slab serif for headlines, posters, branding but fairly legible to be used as longer text. The straight and rounded corners combined with deep cuts and asymmetric serifs gives it a distinctive look while still keeping it’s rigorousness and legibility. The standard version comes free and includes a commercial license.

Free Web Fonts for Typography

Kaine

Kaine is a bold slab-serif typeface influenced by Spagetti Western posters of the 1960s. The standard block version comes free and includes a commercial license.

Free Web Fonts for Typography

Graublau Sans Web

A German typeface with lots of rich history in the print field makes its way to the web. Allows @font-face embedding

Free Web Fonts for Typography

Prociono

Prociono is a beautiful serif and caligraphic font with some blackletter elements. It’s elegancy may fit any poster, that puts an accent on the typography, and beauty elements. It was designed by Barry Schwartz and is currently available in 1 style, with the both .ttf and .oth extensions.

Free Web Fonts for Typography

Secca STD

Secca is a fine typeface honoring the roots of early German grotesque type designs but mastered for the needs of today. The weights from Light to Bold work perfectly for body text. The free version includes a private license only, so you can’t use it for commercial projects.

Free Web Fonts for Typography

Fertigo Pro

Fertigo-Pro is a beautiful, caligraphic and decorative great for headlines. It’s available in two styles, one of it being available for free.

Free Web Fonts for Typography

Museo

Museo is a very popular font nowdays. It is on a high demand because it is a very beautiful, clean and modern font.

Free Web Fonts for Typography

Museo Sans

Museo Sans was created on a based well-known Museo font. It’s OpenType font family offers also support for CE languages. Besides ligatures, automatic fractions, proportional/tabular lining and old-style figures, numerators, denominators, superiors and inferiors MUSEO also has a ‘case’ feature for case sensitive forms.

Free Web Fonts for Typography

Sansation

Sansation is a beautiful, elegant and clean font. It is available in three different styles(Light, Regular, Bold), and has been updated to the 1.2 version recently.

Free Web Fonts for Typography

Glide

Glide is an elegant custom font with rounded corners, great for logos, posters, motion graphics and t-shirts.

Free Web Fonts for Typography

Mr. Jones

Mr Jones was originally conceived as a family for print design consisting of a sans and a headline. The lowercase are wide for legibility at small sizes while the caps are narrower to save space and keep an even balance of negative space when used in body copy.

Free Web Fonts for Typography

LOT

Creative, Fat and Bold font designed by Manual Kerning. It’s “boldness” can be a favor for short-letter-`ed` logotypes and brands. It’s beauty can play a great role in any type of graphic design – web, print, motion graphics, various kinds of t-shirt designs and pictograms.

Free Web Fonts for Typography

Daydream Daily

DayDream Daily Typeface is a beautiful, modern, elegant and bold font, available free of charge.

Free Web Fonts for Typography

Diavlo

Diavolo is a beautiful, elegant and bold font, that is available in 5 different styles (Light, Book, Medium, Bold and Black).

Free Web Fonts for Typography

Lifestyle Marker

LifeStyle Market is an elegant, semi-slab serif font available in 1 style and free of charge.

Free Web Fonts for Typography

Avant Garde

AvanGarde LTD is an elegant, modern font that can be used as poster writings or/and headlines.

Free Web Fonts for Typography

Sorts Mills Goudy

Another from The League of Moveable Type. Like the 1911 version, the Sorts Mills is another traditional serif typeface. Featuring some pretty sweet accentuating curves, this version brings class by the caseload. A ‘revival’ of Goudy Oldstyle and Italic, with features among which are small capitals (in the roman only), oldstyle and lining figures, superscripts and subscripts, fractions, ligatures, class-based kerning, case-sensitive forms, capital spacing. There is support for many languages that use latin script.

Free Web Fonts for Typography

Junction

Another from The League of Moveable Type. Inspired by humanist sans serif typefaces such as Meta, Myriad, and Scala, Junction is where the best qualities of serif and sans serif typefaces come together. It has the hand drawn and human qualities of a serif, and still retains the clarity and efficiencies of a sans serif typeface. It combines the best of both worlds.

Free Web Fonts for Typography

Calluna

Calluna is an elegant and serif font, inspired from the famous and beautiful work “Museo”.

Free Web Fonts for Typography

Fabryka

Fabryka is a modern monospaced lowercase family font available in 7 different styles.

Free Web Fonts for Typography

Dream Orphanage

Dream Orphanage is a high quality reconstruction of the 1990s freeware classic, Dream Orphans font.

Free Web Fonts for Typography

Fenwick

Fenwick is a lineal, metal type with unusual proportions. The almost sinuous curves of the numerals revive their inherent Arabian roots and the italic’s line thickness was amended by eye so as not appear too mechanical.

Free Web Fonts for Typography

Cape Arcona BDN Bold

Based on the original CA BND typeface, this is the web font version, free for use in browsers.

Free Web Fonts for Typography

BULL Pen

Bullpen is a beautiful, heavy, “masculin” and slab-serif font available in 15 different styles.

Free Web Fonts for Typography

St. Marie

St. Marie is also a slab-serif and elegant font that fits great magazine and website headings and also typography posters.

Free Web Fonts for Typography

Conclusion

We’ll be coming out with more of these resource roundup posts in the future, so if we missed your own favorite free font for web designs, post a link to it down below in the comments!

Oh – and it’s worth noting that it’s never our goal here on Webdesigntuts+ to post “garbage stock”, so if you spot a broken link or feel like something just isn’t up to par with our standards, leave a comment. You can leave some nice comments as well though! Share your own favorite icons sets, or discuss any tricks that you have for managing your own collection of icons down below.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://davidbradley.me David Bradley

    This couldn’t have been posted at a better time for me. AWESOME.

  • Brock Nunn

    Awesome post, really nice fonts. Could we go over best practices with cufon or font squirrel fonts and placement within designs.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Hi Brock,

      Sure! I think that’s a great idea for a future post – although it’s worth noting that there are a few tutorials already at Nettuts: http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-how-to-work-with-font-face/ and http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/ will help out :)

      • w1sh

        I think Cufon couldn’t be easier, but I’ve heard there is wide support for @font-face now.
        Maybe some research to back that claim would make me more apt to use @font-face, but as it is, I really, really, like Cufon.

        1) Goto http://cufon.shoqolate.com/generate/
        2) Download Cufon at the top (cufon-yui.js)
        3) Browse for your font .otf, check “The EULAs allow font embedding”, check “All” for glyphs, accept ToS, download your font .js
        4) Call both cufon-yui.js and YourFont-400.js (in that order) in your HTML
        5) Add a piece of script under those calls that says: Cufon.replace(‘h1′);
        6) Enjoy your pretty new H1 tags.

        Literally takes about 1 minute to get sexy fonts.

        I’d love to see an equally face/elegant way to do the same with @font-face.

        • Erik

          Cufon doesn’t support line-height which is very annoying, and can be problematic for very large areas of text. If you’re just using it for headlines its okay.

          • Andrew

            Actually it does support line height pretty well.

        • krishna

          thanq dear…

  • http://oreius.tumblr.com Tanner

    I already have most of the fonts its great to see them all showcased here!
    Good job getting the webs best free fonts!

    Tanner

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Thanks Tanner!

  • Lior D.

    Great fonts for free !

  • http://www.jamdave.com jamdave

    Awesome collection’s, thanks!

  • http://www.pikavipit24.fi Juma

    Thank you very much for a great post! Very nice fonts indeed!

  • http://dteam.us Max

    It would be awfully nice if you post some extra infos for the fonts, like is there extra character ranges (cyrillic etc).

    Anyway that’s a great collection, thanks!

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Hi Max – that’s not a bad idea at all – I’ll see if I can’t go back through this list and include some of that additional information in this post (although most fonts include that information on the download pages as well). Thanks for the comment!

  • http://www.digital-infusion.com Digital Infusion

    Love the Museo font ! Thank you for sharing :)

  • rashid

    Amazing fonts, Museo is amazing and i’m going to try ST RYDE. Thanks Stelian for posting this, I hope Webdesigntuts becomes the best blog on envato network!

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Thanks Rashid!

  • égukin

    For Graublau Sans Serif you have a wrong pic (same with Jura).

    And Diavlo is misspelled.

    Otherwise, great collection, thanks!

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Thanks for the note! I’ve made the corrections :)

  • Wouter

    Recently I used Sansation in a page template I made. It’s a great font, round, stylish and quite soft. In my opinion, it works best at a size of 14px and higher, although even at 10px it is still readable. The bold and italic variants also make for great heading styles.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      That’s great! Thanks for the comment Wouter.

  • Daniel

    Thank you! This is will be a very useful resource. I like it that it is a font with its own little description instead of a bunch of links to sites with free fonts :P

    ps. I see Anivers two times and Graublau Sans Web has the wrong image

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Thanks Daniel – I patched up the image names :)

  • http://www.webguide4u.com Vivek Parmar

    thanks for the lovely share. badly needed and in time i found some cool free fonts at right place.

  • http://camlittle.com Cameron Little

    Really great post. Thanks a lot.

  • http://www.maverickconceptions.com Lynn Wallenstein

    Love the post. I have seen about 1000 posts like it, and this is the first one that I have felt wasn’t filled with crap just to hit a number.

    Thanks!

  • Andy Harl

    Great collection. FYI Anivers is in the list twice ;)

  • http://www.evanweible.com Evan Weible

    Just thought I’d point out that the link for Sorts Mills Goudy actually points to Goudy Bookletter 1911.

    Regardless, this is a great collection of fonts, I downloaded nearly every one of them! Thanks for putting this list together!

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Thanks Evan! Patched :)

  • Tobias Jurga

    Thanks a lot for sharing this article.

  • http://connorcrosby.me Connor Crosby

    Great roundup! Sadly I have most of these fonts, but it is always nice to find a couple new fonts :)

  • http://jessewilliamson.net Jesse

    These fonts are nice and all, but they’re old news. Every other design blog out there has showcased these fonts at some point. Why do you think people commented they already had these or knew about them? Also, not to be more of a troll, but could this title be any more cliche? Why not call it 30+ Awesome Free Fonts For Kick-Ass Ninja Rockstar Web Designs and just get all the current design buzzwords in their? I am disappoint.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Hi Jesse, Thanks for the feedback – I think it’s important to remember that not everyone has these fonts… and while it’s true that lots of these have been showcased at some time before, it doesn’t make them any less helpful for people who haven’t discovered them yet. That said, I’ll take your notes in mind for future posts like this :)

  • http://www.liampennington.blogspot.com Doktorb

    Raleway is superb, I use it for the heading of my blog, it works very well for large-size headings, it’s discrete and distinctive.

  • w1sh

    Can’t tell you how much I enjoy Mr. Jones and the Museos. I’ve used many of those fonts for a long time now, and Mr. Jones + the Museos are by far my favorite and most used.

  • http://www.nionwebdesign.com Niels Pilon

    Already had some of these bust you can never have enough free fonts for your designs, thanks for the list. Really like the Museo and Junction fonts.

  • Jay

    Alot of these are not free? eg Glide font
    http://new.myfonts.com/fonts/typedepot/glide/
    $35 ?
    Am i missing something?

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Hi Jay, It’s mentioned in the intro, but the MyFonts.com fonts all have a couple “free” versions, but you need to pay if you want each individual weight :)

  • http://www.invitrostudio.com John Sanabria

    Great round-up! Fabrika is the perfect choice for a project I just started working on. Perfect timing, thanks a bunch!

  • http://newdynamicmedia.com/ Oksana

    Thanks! I am not sure it is something NEW, BUT it’s FREE. So thanks, holidays start early:-))

  • Pingback: A Great Roundup of New Fonts to Check Out | ChurchCreate

  • http://www.greenloungedesigns.com/webdesign/ lyle

    The only thing better than free coffee is free fonts, thanks

  • http://www.boylecreations.com Aidan Boyle

    Really Cool. I’ve seen a lot of really nice roundups on sites like vandelay design, design reviver and others but I always check them to see the differences. Caught some really nice ones this time around that the others missed.

    I hope some of these find their way to font squirrel. That site is amazing for quick and easy generation of font-face kits. Though I’ve had some issues with firefox rendering in the past before.

  • http://prodigalconcepts.com/ rod rodriguez

    One can never have too many fonts and with round-ups like this life just keeps getting better and better *thumbsup to Stelian for this really rocking compilation.

  • http://www.techwench.com techwench

    thanks!!! great work
    …..

  • Pingback: BlogBuzz November 27, 2010

  • Obed

    Why does it say free and on some fonts there’s a link to myfonts.com? A website where fonts cost money.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      As it mentioned in the article, the fonts from Myfonts.com come with just a handful of weights that are free – it costs money to buy the entire set :)

  • http://www.ihavetuto.cl Luis

    Hey! Thanks! these are great fonts!!!!! but… Fabrika isn’t free… so, I wanted that font t__t

  • http://www.serbancosmin.com serban

    Fertigo Pro is my favorite font . :) just sayin’

  • http://dzn.ca Erin

    They all beautiful. I can’t pick a favorite!

  • Pingback: TeBeBlog » « de la Typo bien Graphiqueé

  • Pingback: Tipografías lindas « Nicolás Flores, Diseñador Multimedial

  • Aaron

    Just so you know, Glide isn’t a free font, it’s $35. The free version is called GlideSketch and has a handdrawn look to it.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Good to know – thanks for the update Aaron, I’ll see if I can’t clarify this inside the article.

  • http://proportionategraphics.com Court

    Thank you for the links.

  • http://lordemons.cilacaponline.web.id Huda

    Thanks for the links, it is very good stuff! :D

  • Pingback: Must Read Links for Web Designers and Developers – Volume 1 | Tech King

  • Techeese

    I love these fonts booked marked this page for future use

  • http://digitalanalog.in dfunk006

    Wow! These are really awesome! :)

    We did a similar post on free fonts recently. http://digitalanalog.in/2010/12/17/10-fresh-and-creative-free-fonts/

  • Shrabya

    Rocking Fonts!!!!

  • http://www.chillidogdesign.com cozzy

    I was interested in the Mr Jones free font. Problem is its not free!!! Should it be in this list?

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      As mentioned in the article, some of these have “free versions” or “free weights”, but to buy the entire face and all of it’s variations, it costs ;)

  • http://dbelldesign.com.au Darren Bell

    Nice list, thanks.

  • Rob

    Thanks for this bank of badass fonts.

  • http://www.thedigitalevolution.co kmknj

    very nice fonts, these will really help with my site designs

  • Pingback: A Great Roundup of New Fonts to Check Out | Church Mag

  • http://www.ilovesouthdevon.com ilovesouthdevon

    Great collection! Thanks for sharing … appreciated.

  • http://www.gowebbaby.com/ Web Designer

    All 30 designs i have seen and found the difference in each one. Thanks for sharing marvelous designs.

  • http://www.webley.in/ Manish Tanwar

    All above designs are really awesome and unique with each other, thanks for sharing.

  • Pingback: The A to Z of Wordpress Typography - WPKewl!

  • http://fotos-of-barcelona.blogspot.com/ Fotos Barcelona

    More useful, thanks a lot

  • http://rachaelbutts.com/ WordPress Designer

    Great List! I get buried in Google fonts sometimes, so it is nice to see them all applied :)
    Thanks Brandon!

  • http://www.theconnectorz.com web designing

    Nice collection.It would be nice if most of them are free without any licensing requirments.

  • http://damatajhiz.com/ Hamid

    Awesome post, really nice fonts

  • Pingback: Awsome font | Cdexpo

  • ImmaToey

    thank you

  • http://www.friendlygorilla.com Friendly Gorilla

    The “Bull Pen” font is gorgeous. Looks like I’m going to be having a busy night installing these and working them into my designs :-) Thank you!

  • SEO Training Indore

    Fertico Pro & Bull Pen fonts are really looks super cool…. i will definitely gonna use them in my designs…Thanks for sharing :)