Home

Welcome to the jquery.webfonts wiki!

Introduction

jQuery WebFonts extension adds font embedding capability to jquery using the WebFonts technology. The extension provides a flexible way to choose font from a font repository and apply on html elements.

Features

• Flexible font repository. The extension can work with any font repository file system. See more..
• Provides many APIs to customize and extend. See more...
• Applies font based on the html lang attribute of the elements
• Make sure the font defined using font-family style for any elements, either using inline css or external css' available for the reader. - without any extra code. See Examples

Usage

• Identify the fonts you want to use in a web page or web site. Prepare a repository for that. Repository is nothing but information about the fonts given in javascript. See more..
• Bind the body of the page with webfonts, as shown in the quick example below. If you are interested in applying the font for a specific element, use proper jquery selectors. Eg: $('div#container').webfonts({/options/})
• Specify fonts for your html elements using any of the following ways:
  1. Use lang attribute to the html tags. Eg : <p lang='ml'>Some text in Malayalam language</p>. Default font for ml will be applied to the paragraph.(provided fonts are defined for ml in reposiotry)
  2. Use inline css style with font-family. Eg : <div style="font-family: Ubuntu" > Internal Content </div> This will apply Ubuntu font to the node, and will make sure that Ubuntu font is downloaded to the reader's browser.
  3. Use a css class, and for that class define a font. Eg: <p class="lohit">...</p> and in a css file, .lohit { font-family : Lohit Hindi; }

Quick example

var localRepository = {
	base : '../fonts/',
	fonts : {
	       "Rufscript" : {
			eot : "Rufscript.eot",
			ttf : "Rufscript.ttf",
			woff : "Rufscript.woff",
			version : "0.1"
		},
	    },
	languages : { 	en : [ 'Rufscript']    }
	};
$('body').webfonts({ repository : localRepository });

For more examples see Examples