Webfonts or Locally loaded fonts?

Question

Ever since the troubles brought on by using Cufon I ventured away from using external font resources, but as of late, I have been looking for alternate methods of l

Answer 1

I think you've addressed the load times very well in your question. From my perspective, there are a few sources that should be added to the list, and a few other considerations that should be examined to get a full view of the options.

---

Some other reputable font sources

cloud.typography

http://www.typography.com/cloud/

From what I can tell, the fonts are embedded as data in a CSS file:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
} 

Here are my specs:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

Here is their very high-level description of their deployment.

Fonts.com

I haven't used this service, but they're a very established font vendor, and the information they've listed on their site is quite impressive. I don't have specs on their exact methods, but here's what I do know they have:

• Some of the most well-known fonts in the world available
• A really big font library (over 20,000)
• Desktop font downloads for making mockups
• A custom tool for testing web fonts in the browser
• Fine typography controls and subsetting
• Self-hosting options

FontSpring

Affiliated with FontSquirrel. Fonts can be purchased here for a fixed price. The font files an accompanying CSS are delivered, to be deployed on your own server, much like FontSquirrel.

---

Expanded specs

As to the overall pros and cons of each font service, here are a few comparisons:

Font Library Size

• Fonts.com: 20,000+
• FontSpring: 1000+
• FontSquirrel: 300+
• Google: 600+
• Typekit: 900+
• Typography.com (cloud.typography.com): probably 300+ (35 families)

Pricing

• Fonts.com: $20/month for 500,000 page views
• FontSpring: Varies by font (one-time purchase of fonts)
• FontSquirrel: Free
• Google: Free
• Typekit: $4/month for 500,000 page views
• Typography.com: $12.50/month for 1,000,000 page views

Font Quality

The quality of web fonts can vary quite a bit. This can encompass things like the letterforms themselves or the spacing or the size of the character set. All of these determine the overall impression of quality that a font will give. While the free options have some good options, they also have some fonts that are not as high quality, so you want to choose carefully from those sources.

• Fonts.com: High
• FontSpring: Mixed to High
• FontSquirrel: Mixed
• Google: Mixed
• Typekit: High
• Typography.com: Very high (I give this a "very high" designation because Fonts.com, FontSpring, and Typekit support multiple type foundries, where this is only fonts from the H&FJ foundry, which is among the best in the world)

Font Quality II: Typography

There are a lot of refinements in desktop typography that have been really hard to get in web fonts. Some of these services offer ways of delivering those.

• Fonts.com: kerning, letterspacing, ligatures, alternate characters, fractions, etc.
• FontSpring: None
• FontSquirrel: None
• Google: None
• Typekit: None
• Typography.com: small caps, ligatures, alternate characters, alternate number styles, fractions, etc.

Browser support

This mostly comes down to the font formats that are supported by each service. The major ones are:

• EOT: for Internet Explorer (IE 4+)
• TrueType and OpenType: Traditional formats (Safari 3.1+, FF 3.5+, Opera 10+)
• WOFF: New standard for web fonts (FF 3.6+, Chrome 5+)
• SVG: IOS <4.2

More information at The @Font-Face Rule And Useful Web Font Tricks

All of these services support the major font formats. With self-hosted fonts, as long as you use the right syntax you should be covered. Here's a 2011 update of the bulletproof syntax from FontSpring:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

Performance I: Downloads

As far as I understand it, using the above syntax allows browsers to grab the specific format that works for them, so there's no wasted downloads on font formats that don't work.

The paid services like Fonts.com, Typekit, or Typography.com use methods to detect the correct format and then deliver the right font format, often as base64 data in a CSS file.

From what I can see, the differences in the methods you've listed above are fairly negligible for high-speed internet users (seems like <200ms difference), but could be worth considering for devices on slower networks, especially for uncached page hits.

Performance II: Subsetting

If you know that there will only be certain characters you want to use, you can build your font with a subset of characters and thus reduce the size of the download.

• Fonts.com: Very detailed control
• FontSpring: Can recompile as subset via FontSquirrel webfont generator
• FontSquirrel: Can recompile as subset via webfont generator
• Google: Very detailed control
• Typekit: limited options of "all characters" or "default"
• Typography.com: Very detailed control

Performance III: Delivery

• Fonts.com: Global CDN or your own server
• FontSpring: Based on your server
• FontSquirrel: Based on your server
• Google: Global super-CDN
• Typekit: Global CDN
• Typography.com: Global CDN (125,000 servers)

Language support

• Fonts.com: 40 languages, including Asian and Middle Eastern
• FontSpring: Western, depending on font
• FontSquirrel: Western, depending on font
• Google: Western, depending on font
• Typekit: Western, depending on font
• Typography.com: Western, depending on font

Testing and Implementation

• Fonts.com: Very easy, with extensive and customizable tools
• FontSpring: Technical (do it yourself)
• FontSquirrel: Technical (do it yourself)
• Google: Easy
• Typekit: Easy
• Typography.com: Easy testing, a little more involved to change once deployed