How to Embed Font in you HTML Webpage – Simple way to Embed Custom Web Fonts

Simple Way to Embed Font in HTML Webpage

Easy Step to Embed Font in HTML Webpage. Many different ways you can embed custom fonts on your website without any server side processing and without killing SEO in your pages with the help of Typeface.js, Cufon, sIFR, CSS 3.0 . you know which one is best and easiest ways to embed fonts.

In this tutorial we show you different ways which you can use to embed font in html webpage. We Show the step how can you embed font in your HTML Page

There are 4 newer and better ways you can Embed Font in HTML Webpage

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 we 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[  // < ![CDATA[  // < ![CDATA[  // <
 ![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 code as usual !!

click for more detail