Skip to content

Font Repository

santhoshtr edited this page Aug 9, 2012 · 3 revisions

jQuery Webfonts extension provides a very flexible and extensible font repository configuration. The extension can work with any font repository residing locally with the extension or in a remote server.

Repository structure

A font repository definition is a javascript object with the following structure

var exampleRepo = {
    base : 'path/to/root_of_repo/',
    languages : {
        en : [ 'EnglishFont1', 'EnglishFont2' ],
        hi:  [ 'HindiFont1', 'HindiFont2', ...]
    },
    fonts : {
      'EnglishFont1' :  {
              eot : 'path/to/FontName.eot',
              woff : 'path/to/FontName.woff',
              ttf : 'path/to/FontName.ttf',
              svg : 'path/to/FontName.svg',
              version : '0.01',
              variants: {
                'bold' : 'FontName Bold', // Name of the font variant. Should be defined in fonts
                'italic' : 'FontName Italic'
             }
       },
      'HindiFont1' :  {
              eot : 'path/to/FontName.eot',
              woff : 'path/to/FontName.woff',
              ttf : 'path/to/FontName.ttf',
              svg : 'path/to/FontName.svg',
              version : '0.01',
    }
}
  • base - This is the base path to the repo. This can be a relative path like ../fonts/ or absolute path to a web server location http://domain.com/path/to/repo. If the domain is different than the application using jquery.webfonts, make sure that cross origin resource share related settings are in place. For more information see https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
  • languages - This is language to fonts mapping. Use ISO 639 language codes as keys and value as array of font names. The font names should match with the font names used as keys in fonts value of the repository. The first member of the array will be considered as default font for the language
  • fonts - This is the definition of the font. You can use the key as the font name. for eg: Meera Tamil or Ubuntu Bold. eot is the path to the EOT format of the font file. similary woff is path to woff formatted webfont. All of these formats are not mandatory, but unless these font formats are provided, we cannot ensure that it works in all browsers. version is a string with the version value of the font. It is often used for updating fonts in server and clearing the font from the browser cache of users. If the font has variants like bold, italic, light etc, provide that information in variants value. The keys are variant names, and values are name of the font. The font should be present in the values of fonts key of repository. Any number of variants can be given

Clone this wiki locally