Ways to Embed Fonts

How to Embed Font in HTML Webpage – Custom Web Fonts

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.
  •  User Side Scripts with no backend processing and SEO friendly options.

 The 4 newer and better ways:

  1. Typeface.js
  2. Cufon
  3. sIFR 3
  4. CSS 3

The above mentioned ways have their own pros and cons which will be discussed, but most of the above listed ways are SEO friendly, with no server side processing and fast.  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.

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.

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

Cufon

This works similarly to 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.
<script type="text/// <![// <![// <![// <![CDATA[
CDATA[ CDATA[ CDATA[ javascript" src="cufon-yui.js">
// ]]>
 // ]]>// <!--[CDATA[ // < ![CDATA[ //

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

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 !!

This text will be shown in Vegur.

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

What To Use ??

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)+++pcandweb.com