| Descripción | CSS standard to define the fonts to use. | CSS and optional Javascript library that handle and serve a set of fonts.
Behind the scene use @font-face but manage the different formats for you. And font is served by Google.
The Javascript API enables more control over font-loading management and let you integrate TypeKit fonts too. | Service that allow you to use a library of fonts directly from their servers. It's similar to Google Font API (based on @font-face) but let's you use more fonts with a subscriptions fee. | Service that allows you to choose from thousands of fonts. Similar
to Typekit but only uses CSS and no JavaScript. | Similar to Google Font API. Uses @font-face and serves the
fonts through their service. | Javascript library that will parse your text and replace it as a canvas or VML path. | Javascript library that will parse your text and replace it as a canvas or VML path. The technique is similar to Cufón. | Javascript library that will parse your text to replace it with Adobe Flash. | Javascript library and PHP script to replace text by images. | Use any image editor to render your text and save as an image. | Use a list of fonts that are generally present in most environments (OS/browser) |
|---|
| Sitio web | www.w3.org/... | google.com/... | typekit.com | webink.com | kernest.com | github.com/... | neocracy.org | novemberborn.net/... | mawhorter.net | | wikipedia.org/... |
|---|
| Difficulty to setup | easy | easy | easy | easy | easy | medium | medium | hard | hard | easy | easy |
|---|
| Dependencies | | external web service | JavaScript, external web service | external web service | external web service | JavaScript | JavaScript | JavaScript, Flash | PHP, JavaScript | | |
|---|
| Ventajas | + accessibility is maintained
+ full unicode support
+ font style support | + font is served by google and might already be in the browser cache
+ font style support | + large selection of fonts
+ font is served by typekit servers | +large selection of professional fonts + fonts served from Amazon
Cloudfront servers | + large selection of fonts
+ font is served by kernest servers | + good support over different browsers
+ you can select the set of characters you need to limit the file generated to represent the font.
+ font-style support is harmonized accross all browsers (text-shadow...) | + good support over different browsers | | + compatible on all graphic browsers | + compatible on all graphic browsers
+ no typography limitations | + lightweight (nothing to download) |
|---|
| Desventajas | - no common font file format to use across all browsers
- some formats are heavy to download | - limited list of fonts
- limited character sets | - yearly fee | monthly fee | | - text not selectable
- due to perfomance, it's more appropriate for headers and small text only
- require some work around for special styling (text-decoration, :hover...) | - text not selectable
- due to perfomance it's more appropriate for headers and small text only | - requires flash
- slow
- flash/adblocker issues | - bandwith consuming
- text not selectable
- requires PHP/GD on the server side | - need to render each text as an image
- bandwith consuming
- text not selectable | - limited list of fonts |
|---|
| Font licensing issue | need font rights | Google serve only open sources font | the fee you pay cover the licences for the fonts served by Typekit | the fee you pay covers the licences for the fonts served by WebINK | you can choose between Open Source fonts and fonts you need to pay
for | need font rights | need font rights | most fonts allow flash embedding | no | no | |
|---|
| Additional link | fontsquirrel.com/... | | | | | shoqolate.com/... | | sifrgenerator.com | | interactimage.com | flywebmaster.com/... |
|---|
| Características | | | | | | | | | | | |
|---|
| Text selectable | Sí | Sí | Sí | Sí | Sí | No | Sí | Sí but only selectable on its own (not with rest of page) | No | No | Sí |
|---|
| Accessible | Sí | Sí | Sí | Sí | Sí | | | Sí not 100% though | | | Sí |
|---|
| Text scalable | Sí | Sí | Sí | Sí | Sí | No it doesn't scale when text size is changed on the fly, but it does scale when the text size has been changed before the page was loaded | No it doesn't scale when text size is changed on the fly, but it does scale when the text size has been changed before the page was loaded | No | No it doesn't scale when text size is changed on the fly, but it does scale when the text size has been changed before the page was loaded | No | Sí |
|---|
| Loads quickly (no FOUT) | Sí | Sí | | | | Sí | Sí | No | No | No | Sí |
|---|
| Compatibility | | | | | | | | | | | |
|---|
| Internet Explorer | Sí 4+ (EOT, WOFF (IE9) fonts) | Sí see @font-face | Sí see @font-face | Sí IE 4+ (EOT, WOFF) | Sí see @font-face | Sí 6+ | Sí 6+ | Sí with flash | Sí | Sí | Sí |
|---|
| Firefox | Sí 3.5+ (TTF, OTF, WOFF (FF3.6) fonts) | Sí see @font-face | Sí see @font-face | Sí 3.5+ (TTF, WOFF) | Sí see @font-face | Sí 1.5+ | Sí 1.5+ | Sí with flash | Sí | Sí | Sí |
|---|
| Safari | Sí 3.1+ (TTF, OTF fonts) | Sí see @font-face | Sí see @font-face | Sí 3.1+ (TTF, WOFF) | Sí see @font-face | Sí 3+ | Sí 2+ | Sí with flash | Sí | Sí | Sí |
|---|
| Google Chrome | Sí 4+ (TTF, OTF fonts) | Sí see @font-face | Sí see @font-face | Sí 3.5+ (TTF, WOFF) | Sí see @font-face | Sí 1.0+ | | Sí with flash | Sí | Sí | Sí |
|---|
| Opera | Sí 10+ (TTF, OTF, SVG fonts) | Sí see @font-face | Sí see @font-face | Sí 10+ (TTF, WOFF) | Sí see @font-face | Sí 9.5+ | | Sí with flash | Sí | Sí | Sí |
|---|
| iPhone/iPad | Sí (SVG font) | No | Sí | Sí 4.2+ (TTF) | Sí see @font-face | | | No | Sí | Sí | Sí |
|---|
User reviews and comments
What is the faster solution (page loading) ? Quelle solution la plus rapide sur le chargement de la page ?