Free Web Font Services – Compared

By . Filed in Web Design

All these years, websites are restricted to typical fonts such as Arial, Georgia, Times and so on. This is due to the limitations of browsers, which at one time, were only able to deliver fonts from the user’s machine. Fortunately today, the web evolves fast and today’s browsers are supporting webfont embedding.

It is likely that more websites will use better and more beautiful fonts in the future, and many webfont service will pop up. Below, we will take a look at four free options of webfont services and their advantages and disadvantages.

Typekit

Typekit is a popular webfont service and one of the first players in this niche, feature clientele that consist of New York Times and Twitter.

As of 2011, Typekit has been acquired by Adobe. Typekit is actually a paid webfont service, but it also has Free option with, of course, a few limitations.

Pros

  • Professional and high-quality fonts — that are probably not found on other service.
  • Continuously add more fonts from world-class foundries.
  • Fast deliverability via Adobe servers and networks.
  • Save much bandwidth, since the fonts are hosted and delivered through Adobe servers.
  • SSL Serving.
  • Wide cross-browser compatibility.

Cons

  • Limited selection of fonts.
  • Limited pageviews
  • Badge required.
  • Limited use of fonts, only 2 per website.

Google Web Font

Google Web Font is a completely free webfont service from Google and probably one of the first initiatives to raise Open Source project for web font embedding.

There are currently around 600 fonts with various font styles to choose from, including Serif, Sans-serif, Script and Hand Writing.

Pros

  • Quick and easy to use.
  • Open source fonts.
  • Desktop fonts are available.
  • Font API and documentation are available.
  • Fonts are served via Google server.
  • Character map.
  • Font preview and filter.

Cons

  • Dingbat font style is not available. It’s actually quite useful, especially if you prefer displaying icons with font.

Example

<link href='http://fonts.googleapis.com/css?family=Croissant+One|Merienda' rel='stylesheet' type='text/css'>

<style>
h1 {
	font-family: ;
}
p {
	font-family: ; 
}
</style>

Font Squirrel (@font-face)

Font Squirrel has done the hardwork of selecting fonts that are free for commercial and can be embedded on the Web.

In addtion, Font Squirrel also provides @font-face kit for each font, the kit includes stylesheets and fonts in the following formats .eot, .ttf, .woff, and .svg to assure that the font is well delivered across browsers.

Pros

  • Fonts are free for commercial use.
  • Desktop fonts are available.
  • Ability to subset the fonts.
  • Style options, Calligraphic, Comic, Dingbat, Retro etc
  • Test and Preview font.
  • Availability of character map (useful for Dingbat font style).
  • Availability of @font-face kit and generator.

Cons

  • You have to host the fonts on your own server.
  • It could slow down your website performance, particularly if your bandwidth and space are limited.
  • Font license are too variable. Make sure the font EULA meets your requirement.

Example

@font-face {
    font-family: 'SansationRegular';
    src: url('Sansation_Regular-webfont.eot');
    src: url('Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Sansation_Regular-webfont.woff') format('woff'),
         url('Sansation_Regular-webfont.ttf') format('truetype'),
         url('Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p {
	font-family: 'SansationRegular';
}

Edge Web Font

Recently, Adobe introduced new product called Adobe Edge. It holds a few tools and services including a webfont service called Edge Web Font.

Edge Web Font is a free webfont service partnered with Google Web Font and there are currently around 500 fonts we can choose from. But, unlike Google Web Font, which delivers the font with stylesheet, Edge Font requires JavaScript to do so.

Pros

  • Completely free and unlimited to use.
  • Huge collection of Open Source fonts.
  • Powered by the same platform as Typekit.

Cons

  • No font previews in the gallery.
  • Poor font categorization in the gallery.
  • Uses JavaScript to serve the fonts.

Example

<script src="http://use.edgefonts.net/droid-sans.js"></script>
<style>
p {
  font-family: droid-sans, serif;
}
</style>

Conclusion

There are many services and options but in the end, it is up to web designers to decide which service best fits their website. If the budget allows, probably the premium plan from Typekit could be the best option. Otherwise, the free option might suffice.

Lastly, for your inspiration, here are couple beautiful websites that use webfonts from the services above.

Atlantis

Hampus Olsson

Lacarotte

Simonpan

Boar’s Head

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Advertisement