How To Embed Custom Font’s On Webpage

Know different ways you can embed custom fonts on your website without any server side processing and killing SEO in your pages. Typeface.js, Cufon, sIFR, CSS 3.0 know which one is best and easiest ways to embed fonts.

In this tutorial i’ll show you different ways which you can use to embed custom font in your website. I’ll keep away from the old or rather obscure which is know as dynamic image replacement where graphics script used to do all the processing on the backend and convert the text to images. This method is somewhat obsolete as it is resource heavy and it doesn’t allow a many styling properties and moreover not suitable for basic servers without script support.
If you still want to know the process of dynamic image replacement you can check it here AlistaPart. FLIR is another great project on dynamic server side based image replacement. You can still use them if you need to, but in this article we’ll only concentrate on User Side Scripts with no backend processing and SEO friendly options.
What we’ll focus on instead on the 4 newer and better ways,

Typeface.js
Cufon
sIFR 3
CSS 3

The above mentioned ways have their own pros and cons which we’ll discuss as we go on, but most of the above listed ways are SEO friendly, with no server side processing and fast. But before we start i should mention most of the above mentioned methods are supported by recent browsers but older browsers will have rendering problem so depending on what you need you might want to check on the website as of the list of browsers supported.

Typeface.js

This works simply by using browsers capability to draw vectors in HTML documents. But before doing so the font must be converted to its internal format using the perl module.
1) Download Latest Typeface.js.
2) Convert the Font and download the js.
3) Link the js files in head.

  <script src="typeface-yourVer.js" type="text/javascript"></script>
  <script src="yourFont.typeface.js" type="text/javascript"></script>

4) Any HTML element you want to be rendered in typeface.js should have typeface-js in its class name and font-name in the CSS. If you are loading the style from external CSS make sure the CSS is linked on top of the js files. For my test i have used this.

  <body>
    <div align=center class="typeface-js" style="font-family: Gentilis;font-size: 24pt;">
      Test of Gentilis Selectable Font
    </div>
  </body>

5) Demo Of The Above Method. Also refer to Typeface Usage for more details on its usage.

Cufon

This works similarly to Typeface, but main difference being the texts are NOT selectable which i think is a drawback, as far as embedding is concerned its almost same and as typeface, but the size in case of Cufon is less by some 40% with better loading time.
1) Download Latest Cufon JS
2) Convert the font and download JS
3) Link the js files in head, and just add the elements to replace in Cufon.replace(); css styles will be added from the predetermined stylesheet.

<head>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="yourFont.font.js" type="text/javascript"></script>
<script type="text/javascript">
 Cufon.replace('#cufon');
</script>
</head>

4) Write the body as usual no need to stick to certain class.

 <body>
  <div id="cufon" align=center style="font-size: 24pt;">This text will be shown in Vegur.</div>
 </body>

5) Demo Of The Above Method. Also refer to Cufon Documentation for more details on its usage.

sIFR 3

sIFR use Javascript, Flash and CSS to implement the display of custom font. Good thing is the text are selectable and this method is perfectly SEO friendly. Bad thing is it requires users to have flash plug-in installed to display the font, and also the size of the final file is pretty large by 20-30% from Typeface method.
The implementation is not as straight forward as other methods mentioned above, many steps are required and you need to have Adobe Flash on your machine on 1st place, follow the Official Guide
Find here the Official Demo

CSS 3.0

As earlier as CSS 2.0 in 1998 it was implemented but discontinued in CSS 2.1, but again in CSS 3.0 it has been re-introduced. Compatible with all major latest browsers, this is really the best method unless again it is discontinued by W3C.
1) Declare each font-family you want to use using @font-face rule and styles all in CSS

@font-face {
 font-family: yourFont;
 src: url('yourFont.ttf');
}
h1 { font-family: yourFont, sans-serif; }

4) Write the body as usual !!

 <body>
  <h1>This text will be shown in Vegur.</h1>
 </body>

5) For more references on @font-family visit W3C

What To Use ??

I’m sure this is the question which have aroused in your mind, and i’m also sure the answers in your mind too !! Dynamic Image Replacement methods like FLIR can be used if you are too creepy about rendering in different browsers and other compatibility problems in old browsers. But unless that’s not your case and you are ready to do cross browser experiments i’m sure CSS 3 is clear winner, but if i was in your place i’d wait for CSS 3 to become more mature before jumping on it, instead for now i’d use Typeface.js though its larger than Cufon i like that users can select the texts as usual, but if you are looking for something fast loading and small size i’d recommend Cufon, with all these options i doesn’t really recommend sIFR on any situation unless you really want to try something flashy (pun intended)

Thursday, January 14, 2010