3 Free Web Font Services Compared

By . in Web Design. Updated on .

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. Typekit is actually a paid webfont service, but it also has Free option with, of course, a few limitations.

typekit
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.

google webfont
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.

font face
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';
}

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.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail