Over the past few years the number of fonts available for use in web design has dramatically increased. It wasn't long ago that we all knew not to stray further than the basic Arial, Helvetica, Times, Georgia mix, but now there's a range of services that allow the use of almost any font imaginable in your website design. This post rounds up the various custom web font solutions and looks at the pros and cons of each.
@font-face
The most basic solution out of the lot is the CSS3 @font-face property. I'm sure we're all familiar with @font-face by now, it allows you to load a font file from your CSS and apply that font to the styling of your HTML text.
Pros:
- Powered by CSS. No Javascript or Flash
- Completely accessible
- Easy to implement without external plugins
Cons:
- Limited to open source fonts
Links:
Google Web Fonts
Since Google launched its Google Web Fonts API the service has grown to include hundreds of freely available fonts for use in your designs. The service was a hit from the start even with its small introductory collection, but now there's a whole library of styles available it's certainly one of the best custom font solutions.
Pros:
- Powered by CSS. No Javascript or Flash
- Completely accessible
- Google hosted fonts are often cached and load very fast
- Easy to implement through Google's Web Fonts library
Cons:
- Choice is limited to a range of free fonts
Links:
Typekit
For those needing professional or classic fonts in their designs for corporate branding, Typekit is definitely the best solution. Unlike other free services, Typekit allows the embedding of popular premium fonts such as Futura, Meta and Cocon.
Pros:
- Largest library of fonts, including classic typefaces
- Service has been acquired by Adobe, which suggests it will be reliable
- Easy to implement through Typekit's online interface
Cons:
- Premium service with a yearly fee
Links:
Cufon
Nowadays Cufon is overshadowed by the larger custom web font services, but it was a pretty useful resource when it was first launched. Cufon is Javascript powered which makes it great for compatibility across older browsers that don't support @font-face, but it comes with a few disadvantages of its own.
Pros:
- Good cross browser support
- Character set can be limited for a smaller file size
Cons:
- Text is not selectable
- Should only be used for headers, not body text
- Limited to open source fonts
Links:
sIFR
When sIFR was first introduced many years ago it was a groundbreaking addition to the web designer's toolbox. Nowadays the Flash technology behind sIFR just isn't up to par accessibility and performance wise when compared to the newer alternative soltuions.
Pros:
- Almost any font can be embedded, including the classics
- Text remains selectable
Cons:
- Flash based technology is slow and heavy
- Won't work on Apple devices
- Difficult to implement
Links:
Typeface.js
Typeface.js was released as a viable alternative to sIFR and FLIR as it didn't require any additional technologies such as Flash or PHP with it being entirely Javascript based.
Pros:
- Good cross browser support
- Easy to implement with a couple of Javascript links
Cons:
- Outputs text as an image, which means it isn't selectable
- Should only be used for headers, not body text
- Limited to open source fonts
Links:
Sent from my iPhone
Nice post...Amazing information. Thanks for sharing.
ReplyDeletewe offer a variety of web design and development services for any sized web projects. We believe that a truly professional and well-designed website will be an effective marketing tool. Our team of web designers and web developers have the tools to take your website to the next level.
Web development company winnipeg
Mobile app development winnipeg