5 Font Replacement Techniques For Custom Font Embedding | PixlD Inc Blogs

Font Replacement Techniques

Font Replacement Techniques

Typography is very important in Web Design. Current Web Design trends suggest the use of ‘fancy’ fonts to ensure a good user experience, however, most of these ‘fancy’ fonts are not standard system fonts.

Font Replacement techniques provide a good solution to allow the use of your ‘custom’ fonts on websites.

This post outlines some of the most popular Font Replacement solutions that can be used to incorporate your ‘custom’ fonts into your next website; to make it ‘pop’.

vía 5 Font Replacement Techniques For Custom Font Embedding | PixlD Inc Blogs.

 

OTHERS:

I’m pleased to announce yet another technique: rendering SVG font definitions using dojox.gfx, coming in the Dojo Toolkit 1.2 release!

http://www.sitepen.com/blog/2008/09/08/custom-fonts-with-dojoxgfx/

 

sIFR 2.0

sIFR 2.0: Rich Accessible Typography for the Masses

 

sIFR (Scalable Inman Flash Replacement) uses flash and javascript to generate the text in the custom font. A web safe font is used if a user doesn’t have flash installed. Styling is handled by both CSS and JavaScript.

Advantages

  • Text is selectable
  • Any font can be used. (sIFR does not violate the EULA)
  • You can easily add shadows, anti-aliasing, and other text effects in Flash

Disadvantages

  • Requires Flash and JavaScript both to be enabled.
  • Takes quite some time to load.
  • Difficult to implement

Resources

 

Cufón

cufón - fonts for the people

Cufón is a Javascript-based font replacement solution which makes use of canvas and VML. It converts your font to a proprietary JavaScript format and link to it and the main Cufón script. Styling is handled by CSS as normal.

Advantages

  • Quite easy to implement
  • Does not require flash
  • Works with all browsers
  • Rendering of text is quite fast

Disadvantages

  • Not all fonts can be used ( EULA issues )
  • Text is not selectable

Resources

 

Typeface.js

typeface.js - Rendering text whith javaScript,  and VML

Typeface.js uses the HTML5 canvaselement or VML to draw text. It is quite similar to Cufón in that your font is converted into a proprietary JavaScript format and link to it and the main typeface.js JavaScript library. It is styled normally via CSS.

Advantages

  • Easy to implement
  • User does not have to have flash installed
  • Compatible with most browsers

Disadvantages

  • Text cannot be highlighted.
  • Not many font’s are permitted to be embedded
  • Currently, it does not support :hover

Resources

 

FLIR

Facelift Image Replacement

Face lift image replacement (FLIR) uses PHP and javascript to generate an image that replaces the desired text.

Advantages

  • All fonts can be used
  • Rendering is faster than sIFR
  • Font is rendered as an image, so there is no EULA violation
  • Rendered font is printable, since it is an image

Disadvantages

  • Difficult to implement
  • Text is not selectable
  • Requires PHP with the GD enabled

Resources

 

PIR

PIR - PHP Image Replacement

PHP Image Replacement uses PHP and jQuery to dynamically generate images for your text.

It  basically requires you to upload a standard font file to your web server, which is used along with your CSS to display your font accordingly.

Advantages

  • All Fonts can be used

Disadvantages

  • Difficult to implement

Resources

Definitely explore and try out a Font Replacement technique in your next project, if you don’t already.

This list is not at all exhaustive so kindly share any other effective Font replacement techniques you use or may have encountered.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s