CLOSE
    A growing repository with 722 bundles & 9617 resources for web ninjas
    (freebies, plugins and snippets) updated & curated every day, so it never expires.
CLOSE

Web fonts vs Commercial fonts + 150 great web typefaces

Created by Admin on Jan 29 2015

Commercial fonts or free fonts?, this is a big dilemma that afflicts many designers as they find difficult to decide between beautiful but expensive fonts such as Helvetica or Futura and free fonts like the ones featured on Google Web Fonts, which also have a really nice design but will never be like the originals.

This post more than being an extensive article where we discuss the benefits of free and commercial fonts wants to offer you a pleasant time through an amusing game where you must choose between different options and find out which option is the correct, just like the old Pepsi vs Coke commercials that we saw many years ago. Let’s see how much you know about typefaces!. After the game, you will find a great list featuring some of the nicest web fonts available nowadays for your inspiration. Also if you like these fonts you will find pretty useful our last project Best web fonts, a handpicked selection of the best fonts from Google web fonts.

The exercise goes like this: In every point you’re going to find two typefaces, one commercial and one from the Google Web Fonts library, you must try to guess which option corresponds to the original commercial font, let’s see how much do you know about typefaces.

Neue Helvetica® Std 25 vs Raleway

findfont02

So, what’s the commercial one?

Neue Helvetica® Std 25: 29 USD
Raleway:

[css]

<link href="http://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Raleway’, serif;
font-size: 134px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.032em;
word-spacing: 0em;
line-height: 1.22;
}
</style>

[/css]

Correct answer: Right

Futura PT Book vs Didact Gothic

findfont01

So, what’s the commercial one?

Futura PT Book: 30 USD
Didact Gothic:

[css]

<link href="http://fonts.googleapis.com/css?family=Didact+Gothic:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Didact Gothic’, serif;
font-size: 128px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Right

Myriad Pro vs Cabin

findfont03

So, what’s the commercial one?

Myriad Pro: 969 USD (available with the entire Myriad Pro pack)
Cabin:

[css]

<link href="http://fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Cabin’, serif;
font-size: 128px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Left

Avant Garde Gothic Std Book vs Didact Gothic

findfont04

So, what’s the commercial one?

Avant Garde Gothic Std Book: 29 USD
Didact Gothic:

[css]

<link href="http://fonts.googleapis.com/css?family=Didact+Gothic:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Didact Gothic’, serif;
font-size: 149px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Left

FF Milo Offc Medium vs Molengo

findfont07

So, what’s the commercial one?

FF Milo Offc Medium: 109 USD (available with the entire FF Milo Offc Medium Set pack)
Molengo:

[css]

<link href="http://fonts.googleapis.com/css?family=Molengo:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Molengo’, serif;
font-size: 103px;
font-style: normal;
font-weight: 700;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Left

Helvetica® Neue 65 Medium vs Cabin

findfont05

So, what’s the commercial one?

Helvetica® Neue 65 Medium: 35 USD
Cabin:

[css]

<link href="http://fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Cabin’, serif;
font-size: 98px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Right

Frutiger Pro 55 Roman vs DroidSans

findfont06

So, what’s the commercial one?

Frutiger Pro 55 Roman: 35 USD
DroidSans:

[css]

<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Droid Sans’, serif;
font-size: 98px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Left

Gill Sans Pro Medium vs Cabin

findfont09

So, what’s the commercial one?

Gill Sans Pro Medium: 35 USD
Cabin:

[css]

<link href="http://fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Cabin’, serif;
font-size: 77px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Right

Eurostile Regular OT STD vs Play

findfont10

So, what’s the commercial one?

Eurostile Regular OT STD: 29 USD
Play:

[css]

<link href="http://fonts.googleapis.com/css?family=Play:regular,bold" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Play’, serif;
font-size: 124px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Right

Minion Pro Subhead vs Freehand

findfont11

So, what’s the commercial one?

Minion Pro Subhead: 35 USD
Freehand:

[css]

<link href="http://fonts.googleapis.com/css?family=Freehand:regular&subset=khmer" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Freehand’, serif;
font-size: 129px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: -0.154em;
line-height: 0.6;
}
</style>

[/css]

Correct answer: Left

FF Meta Serif Offc vs Radley

findfont08

So, what’s the commercial one?

FF Meta Serif Offc: 109 USD (available with the entire FF Meta Serif Offc Book Set pack)
Radley:

[css]

<link href="http://fonts.googleapis.com/css?family=Radley:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Radley’, serif;
font-size: 134px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Left

ITC Franklin Gothic Std Book vs Quattrocento

findfont12

So, what’s the commercial one?

ITC Franklin Gothic Std Book: 29 USD
Quattrocento:

[css]

<link href="http://fonts.googleapis.com/css?family=Quattrocento+Sans:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Quattrocento Sans’, serif;
font-size: 127px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.02em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Right

Museo Slab 500 Regular OT vs Arvo

findfont13

So, what’s the commercial one?

Museo Slab 500 Regular OT: Free for registered users
Arvo:

[css]

<link href="http://fonts.googleapis.com/css?family=Arvo:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Arvo’, serif;
font-size: 110px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: -0.02em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Left

Times New Roman STD vs Taprom

findfont14

So, what’s the commercial one?

Times New Roman STD: 29 USD
Taprom:

[css]

<link href="http://fonts.googleapis.com/css?family=Taprom:regular&subset=khmer" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Taprom’, serif;
font-size: 110px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0.002em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Right

Rockwell Extra Bold vs Bevan

findfont15

So, what’s the commercial one?

Rockwell Extra Bold: 26 USD
Bevan:

[css]

<link href="http://fonts.googleapis.com/css?family=Bevan:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: ‘Bevan’, serif;
font-size: 73px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0.085em;
word-spacing: 0em;
line-height: 1.2;
}
</style>

[/css]

Correct answer: Left

Awesome web fonts

Web fonts are definitely some of the greatest things that have happened for web designers in the recent time, as they are no longer limited to the small list of the so-called ‘system fonts’, all they have to do is leverage the @font-face property and implement any web font they want with the certainty that people will see them properly.

There are different methods for embedding typefaces on the web and on this next section we want to show you the most relevant methods as well as some of the nicest fonts that you can find on the official sites of these methods for further implementation within your web projects, so let’s take a look at them:

Cufón

These method is an effective and easy to use system for inserting non-web fonts into any webpage without relying on plugins or tricky scripts. Cufón works its magic through JavaScript and HTML5 canvas for fonts’ rendering. On the official site you can find a tool for converting any font you choose into SVG, and from then it creates a JavaScript file to work with the HTML.

Cufón is one of the most popular web-font systems around thanks to its simplicity and compatibility with all popular browsers (IE included), the system also integrates with CSS3 features, making it even nicer and powerful. The main problem with Cufón is JavaScript, because many people tend to block it on their web browsers. Now let’s take a look at some of the most attractive fonts that you can find Cufón-ready.

Titillium

Titillium

Bebas Neue

Bebas-Neue

Caviar Dreams

Caviar-Dreams

Coolvetica

Coolvetica

ChunkFive

ChunkFive

Capsuula

Capsuula

Quicksand

Quicksand

Circula

Circula

Eurofurence

Eurofurence

Qlassik

Qlassik

League Gothic

League-Gothic

Greyscale

Greyscale

Droid

Droid

Dustismo

Dustismo

Enigmatic

Enigmatic

Folks Light

Folks-Light

Forque

Forque

Hamburger Heaven

HamburgerHeaven

Inconsolata

Inconsolata

Lane

Lane

@Font-face in Font Squirrel

@font-face is a CSS rule that lets people download any font from their servers and then render it inside a webpage if the user doesn’t have that font installed. Therefore, as we said previously, web designers will no longer have to adhere to a particular set of ‘web safe’ fonts that come pre-installed in every PC.

There are different online services that take advantage of the @font-face technology to provide tons of web-ready fonts. One of the most popular services to find free web fonts and all the information about them is Font Squirrel, now let’s take a glance at some of the nicest fonts that you can find there.

St Marie

Nobile

Aller

Cantarell

Sansation

Matchbook

Ostrich Sans

Lekton

Louisianne

Afta Sans

Cicle

Folks Light

Metrophobic

OSP Din

Tex Gyre Adventor

Tiresias

Walkway

Winterthurcondensed

Rokkitt

Typoslabserif

Google Web Fonts

Of course that the guys of Google must have their own font library. Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers, now let’s take a glance into some of the most attractive fonts of this collection.

Muli

Maven

Wire One

Shanti

Ultra

Francois One

Didactic Gothic

News Cycle

Amaranth

Oswald

Open Sans Condensed

Anton

Puritan

Yanone Kaffeesatz

Crushed

Bevan

Lobster

Smythe

Coda

Copse

Fonts.com Web Fonts

For many years Fonts.com has been one of the top places to find quality fonts at reasonable prices. You can find a web fonts section featuring more than 8.000 fonts to be implemented on your web projects. In order to start using these fonts you’ll have to signup, but even so, this is a great font service in case you’re constantly working with fonts and developing for the web.

DIN Next

Trade Gothic®

Alternate Gothic No 1

Angro™ Light

Badloc™ Regular

Bell Centennial Sub Caption

Burin Sans™ Regular

Corinthian Condensed Bold

Digi Grotesk™ S Light

Eurostile® Next Light

Flyer™ Black Condensed

Neue Frutiger® Regular

Gill Sans® Book SC

ITC Goudy Sans® Black Italic

Neue Helvetica® 33 Extended Thin

Helvetica® Condensed

Kabel® Heavy

Morris Sans® Light Condensed

Plak® Black

Sackers™ Gothic Light

Typekit

One of the most popular paid services around, Typekit provides font licensing to its users to the humongous store of fonts that the page possesses. You can submit your own fonts in exchange for unique offers and promotions. The site offers a complete support to @font-face, giving you the chance of embedding any web font within your web projects.

Adelle Web

Fertigo Pro Script

Anisette STD Petite SC

Le Havre

Colaborate

Hydrophilia Liquid

Tenby Six

Moby

Ligurino Condensed

Share TechMono

Magion Web

Calluna Sans

Poplar Std

saxMono

Faricy New

Alwyn New

Tandelle

Liberation Sans

Ubuntu

Ostrich Sans Dashed

Depot New

Font Deck

The renowned web design company Clear Left decided to join forces with OmniTI to release Font Deck, a paid service where you will only be charged for the fonts you use, which makes it perfect for the persons that want to utilize just one or two fonts in their blogs. The problem with this service is that you cannot download the fonts and therefore you can purchase a free package to display them online.

The Shire Types Cheshire

The-Shire-Types-Cheshire

Proxima Nova Regular

Proxima-Nova-Regular

Bliss Bold

Bliss-Bold

Sommet Slab Black

Sommet-Slab-Black

Reader Regular

Reader-Regular

Montefiore Regular

Montefiore-Regular

Malamondo Regular

Malamondo-Regular

Calypso E Bold

Calypso-E-Bold

Oblik Regular

Oblik-Regular

Futura Book

Futura-Book

Avalon Medium

Avalon-Medium

Urbano Condensed Regular

Urbano-Condensed-Regular

FS Lola Web Medium

FS-Lola-Web-Medium

Bree Regular

Bree-Regular

Square Serif Book

Square-Serif-Book

Ronnia Condensed Regular

Ronnia-Condensed-Regular

NeoGram Condensed Bold

NeoGram-Condensed-Bold

Grotesk Condensed URW Light

Grotesk-Condensed-URW-Light

Mostra Nuova Regular

Mostra-Nuova-Regular

Passage Regular

Passage-Regular

Font Spring

Instead of offering yearly / monthly subscriptions, this site decided to stick with the classic system of single font purchasing. You can download the font and then host them on your own server, as more than 99 % of the fonts on the site can be implemented through the @font-face property. Now let’s take a look at some of the nicest fonts that you can find on this site:

Calluna Sans

Calluna-Sans

Banda

Banda-Font

Expressway

Expressway

Familiar Pro

Familiar-Pro

Springsteel

Springsteel

Steelfish

Steelfish

Anivers

Anivers

Mentone

Mentone

Galette

Galette-Font

Kenyan Coffee

Kenyan-Coffee

Florin Sans

Florin-Sans

Circula

Circula-Font

Deftone Stylus

Deftone-Stylus

Dezen Pro

Dezen-Pro-Font

Dream Orphanage

Dream-Orphanage

Fabryka 4F

Fabryka-4F

Fenwick

Fenwick

FuturaClassic

FuturaClassic

Gnuolane

Gnuolane

Jesaya

Jesaya

So friend, how many points did you make?, don’t feel bad if you missed more than one because that was the whole idea of this exercise, to demonstrate how the most famous commercial fonts can be emulated using the Google Fonts library, though we cannot deny the awesomeness of all the original typefaces featured on this exercise. If you liked this test and the web fonts that we showed you, please help us share it with your friends, let’s see who is the master of typefaces!!, don’t forget to check all our articles and updates to find more useful web design posts.

This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

Open bundle builder

Bundle Builder

0 elements selected | Clear all ×

Select the bundle you want to add the items to.

Search bundle (filter by name)
Create new bundle
×

Add new bundle

×

Edit bundle