Flag This Hub

How to Use sIFR with jQuery to Use Your Own Fonts

By


Scalable Inman Flash Replacement

Scalable Inman Flash Replacement (sIFR) allows you to use custom typography on your site by using JavaScript, Flash, and CSS.

With the jQuery Sifr Plugin, you can easily display dynamic, on-the-fly text using the font(s) of their choice, regardless of the visitor's currently installed fonts, web browser, or operating system. This plugin provides a very simple configuration process.

Download jQuery

Download jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. - jQuery.com

Download the jQuery sIFR Plugin

Download the jQuery sIFR Plugin

Include this code in the head tag of your page

<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.flash.min.js"></script>
<script type="text/javascript" src="path/to/jquery.sifr.js"></script>
<script type="text/javascript">
<!--
  $(document).ready(function(){
    $.sifr({
      path: "path/to/resources/",
      save: true
    });
    $("h1").sifr({
      font: "AvantGarde Bk BT"
    });
  });
// -->
</script>

Using Your Fonts

Find true type fonts and convert them to flash using the sIFR Generator for sIFR version 2.

Examples

Here are some examples of the jQuery sIFR Plugin in use.

Learn jQuery

JavaScript & jQuery: The Missing Manual
Amazon Price: $21.88
List Price: $39.99

Ask Questions! Help Me, Help You

Pyronex 22 months ago

its really good but its cancelling out the .click function of the

Pyronex 22 months ago

sorry last post striped some of the text

its cancelling out .click for an anchor

jonkarna 22 months ago

Well, I know that this approach comes with some issues just as you have mentioned. I will probably be writing another article on another method of doing this. Go here.

http://www.fontsquirrel.com/

Pyronex 22 months ago

damn was hoping you had a solution nvm

will still help out in other areas

make it much easer to use

gj

pyro 22 months ago

made* :P

jonkarna 22 months ago

You will probably be better off using @font-face and use the generator at fontsquirrel.

Submit a Comment
Members and Guests

Sign in or sign up and post using a hubpages account.



    Like this Hub?
    Please wait working