iPixel Creative - Singapore web design & web development company: Free Web Font Services

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.

Recommended Reading: A Look Into: Better Typography For Modern Websites

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.

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 web design Singaporeers 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