How To Embed Custom Font’s On Webpage

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,

  1. Typeface.js
  2. Cufon
  3. sIFR 3
  4. 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.

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.

Test of Gentilis Selectable Font

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.

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

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

This text will be shown in Vegur.

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

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)

Tags: , , , , , , , ,

13 Responses to How To Embed Custom Font’s On Webpage

  1. [...] This post was mentioned on Twitter by Fadi Semaan, David Carr, subhadeepgayen, Muhammad Yoosuf, Rodrigo Mastrigiani and others. Rodrigo Mastrigiani said: RT: @goodtutorials (HTML) How To Embed Custom Font’s On Webpage http://migre.me/guax [...]

  2. Great tutorial. I think I will have to go with the CSS 3 method.

  3. Great thing I have learned from this tutorial. I was extremely confused with font problem but now i feel some relief. I should go to Typeface.js. Thanks A Lot Shubhdeep.

  4. needles says:

    This is a good tutorial actually, I was trying to figure this out. Thanks.

  5. Leon says:

    Thank you so much, the css3 solution looks the best so far, hopefully ie9 will make our life a bit easier and support it…
    .-= Leon´s last blog ..Dynamic Div Box =-.

  6. Thanks for this dude! By the way, I’m curious about the 4th method which is CSS3. Can I use Linux fonts for that? For example, Museo.otf.

  7. Tobias says:

    Thank you for this great tutorial! CSS 3 method seems the best, and also seems supported by the most of the major web browsers:

    http://www.webfonts.info/wiki/index.php?title=%40font-face_browser_support

  8. wembaster says:

    it work, thanks!

  9. ravi varma says:

    thanq man. u’r tutorial really helped me.

  10. It’s a great tutorial and thanks subhadeep, pl. keep on posting some new. it helped me a lot. thanks again.

  11. but css3 sometimes not working properly

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>