How to Use sIFR with jQuery to Use Your Own Fonts
64
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
|
jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)
Price: $22.87
List Price: $34.99 |
Typography
|
Typography Workbook: A Real-World Guide to Using Type in Graphic Design
Price: $14.95
List Price: $25.00 |
sorry last post striped some of the text
its cancelling out .click for an anchor
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.
damn was hoping you had a solution nvm
will still help out in other areas
make it much easer to use
gj
made* :P
You will probably be better off using @font-face and use the generator at fontsquirrel.
Pyronex 2 weeks ago
its really good but its cancelling out the .click function of the