You are here

README.txt in Webfont Loader 6

# Google Webfont Loader API (WebFont Loader)
  WebFont Loader gives you added control when using linked fonts via
  `@font-face`. It provides a common interface to loading fonts regardless of
  the source, then adds a standard set of events you may use to control the
  loading experience.

## Get Started

First enable the module, then go to:
 1)admin/build/themes/manage/google_webfont_loader_api if using Drupal 6.x
 1)admin/appearance/manage/google_webfont_loader_api if using Drupal 7
 1)Select the package that is available (choose n/a if you want to use the
   default theme font)
 1)Choose if you want to serve the Webfont Loader file locally.  While it will
   increase the size of your js file, it can get preprocessed and can be much
   faster at loading the various fonts.
 1)Press save and you're good to go!
  
## Creating your own font packages

Of course, the first four steps are only useful if you want to use the fonts
that come packaged with the module along with the stylesheets that were created
for demonstration purposes (which may be unlikely)

If you are familiar with creating .info files for a module or a theme, then this
is the very same process.  Only now, you will be creating .fontinfo files.

The .fontinfo file will require:<br />
 * name - this is where you place in the name (or description) of the font
    package

Optionally, you can specify:
 * render_css - this is an array which specifies paths to various css files that
implement various css rules that you may have regarding the fonts.  Please note
that the path of the files are relative to the location of the .fontinfo file.

The .fontinfo files currently support five libraries (we'll work our way from
easiest to hardest), and can support multiple rendering stylesheets which can be
preprocessed with the core drupal css files.

### Typekit
Your .fontinfo file (let's call it typekit_demo.fontinfo) would look something

name = 'TypeKit Demonstration'
typekit = 'my-typekit-id'
render_css[] = local/path/to/stylesheet1.css
render_css[] = local/path/to/stylesheet2.css

For the typekit line, you specify your typekit id along with any paths to
the rendering stylesheets.

And specify any render_css files.

### Fontdeck
Fontdeck is very similar to typekit in that it only requires an id to pull in
the font-face declarations:

name = 'FontDeck Demonstration'
fontdeck = 'my-fontdeck-id'
render_css = 'http://site.com/path/to/stylesheet.css'

Here, you can see that render_css does not necessarily need to be an array.
Moreover, you can specify an external render stylesheet if it already holds the
style you are looking for.

### Google Fonts
Google font families only require you to name the various font families along
with any additional weights that you require.

name = 'Google Font Demonstration - Droid'
google_families[] = 'Droid Sans'
google_families[] = 'Droid Serif'
render_css[] = 'render_stylesheet.css'

Please note that you can find a demonstration of this with the google_josefin
font provided with the module.

### Custom Fonts
Finally, webfont loader supports custom @font-face definitions.  You need to
provide the name of the font-face families that need to be detected along with
a path to the css file(s) where there definitions will be found

name = 'Custom Font Demonstration - Beteckna'
custom_families[] = BetecknaLowerCaseBold
custom_families[] = BetecknaLowerCaseItalic
custom_families[] = BetecknaLowerCaseMedium
custom_style_css[] = path/to/definition_stylesheet.css
custom_style_css[] = path/to/definition_stylesheet2.css

Please note that custom_style_css can also refer to just one file (and is
recommended) if you are serving a font that is hosted on your own server.

You can find out a lot more about the web font loader and how to format your css
at [gfontapi]

[gfontapi]: https://code.google.com/apis/webfonts/docs/webfont_loader.html

File

README.txt
View source
  1. # Google Webfont Loader API (WebFont Loader)
  2. WebFont Loader gives you added control when using linked fonts via
  3. `@font-face`. It provides a common interface to loading fonts regardless of
  4. the source, then adds a standard set of events you may use to control the
  5. loading experience.
  6. ## Get Started
  7. First enable the module, then go to:
  8. 1)admin/build/themes/manage/google_webfont_loader_api if using Drupal 6.x
  9. 1)admin/appearance/manage/google_webfont_loader_api if using Drupal 7
  10. 1)Select the package that is available (choose n/a if you want to use the
  11. default theme font)
  12. 1)Choose if you want to serve the Webfont Loader file locally. While it will
  13. increase the size of your js file, it can get preprocessed and can be much
  14. faster at loading the various fonts.
  15. 1)Press save and you're good to go!
  16. ## Creating your own font packages
  17. Of course, the first four steps are only useful if you want to use the fonts
  18. that come packaged with the module along with the stylesheets that were created
  19. for demonstration purposes (which may be unlikely)
  20. If you are familiar with creating .info files for a module or a theme, then this
  21. is the very same process. Only now, you will be creating .fontinfo files.
  22. The .fontinfo file will require:
  23. * name - this is where you place in the name (or description) of the font
  24. package
  25. Optionally, you can specify:
  26. * render_css - this is an array which specifies paths to various css files that
  27. implement various css rules that you may have regarding the fonts. Please note
  28. that the path of the files are relative to the location of the .fontinfo file.
  29. The .fontinfo files currently support five libraries (we'll work our way from
  30. easiest to hardest), and can support multiple rendering stylesheets which can be
  31. preprocessed with the core drupal css files.
  32. ### Typekit
  33. Your .fontinfo file (let's call it typekit_demo.fontinfo) would look something
  34. name = 'TypeKit Demonstration'
  35. typekit = 'my-typekit-id'
  36. render_css[] = local/path/to/stylesheet1.css
  37. render_css[] = local/path/to/stylesheet2.css
  38. For the typekit line, you specify your typekit id along with any paths to
  39. the rendering stylesheets.
  40. And specify any render_css files.
  41. ### Fontdeck
  42. Fontdeck is very similar to typekit in that it only requires an id to pull in
  43. the font-face declarations:
  44. name = 'FontDeck Demonstration'
  45. fontdeck = 'my-fontdeck-id'
  46. render_css = 'http://site.com/path/to/stylesheet.css'
  47. Here, you can see that render_css does not necessarily need to be an array.
  48. Moreover, you can specify an external render stylesheet if it already holds the
  49. style you are looking for.
  50. ### Google Fonts
  51. Google font families only require you to name the various font families along
  52. with any additional weights that you require.
  53. name = 'Google Font Demonstration - Droid'
  54. google_families[] = 'Droid Sans'
  55. google_families[] = 'Droid Serif'
  56. render_css[] = 'render_stylesheet.css'
  57. Please note that you can find a demonstration of this with the google_josefin
  58. font provided with the module.
  59. ### Custom Fonts
  60. Finally, webfont loader supports custom @font-face definitions. You need to
  61. provide the name of the font-face families that need to be detected along with
  62. a path to the css file(s) where there definitions will be found
  63. name = 'Custom Font Demonstration - Beteckna'
  64. custom_families[] = BetecknaLowerCaseBold
  65. custom_families[] = BetecknaLowerCaseItalic
  66. custom_families[] = BetecknaLowerCaseMedium
  67. custom_style_css[] = path/to/definition_stylesheet.css
  68. custom_style_css[] = path/to/definition_stylesheet2.css
  69. Please note that custom_style_css can also refer to just one file (and is
  70. recommended) if you are serving a font that is hosted on your own server.
  71. You can find out a lot more about the web font loader and how to format your css
  72. at [gfontapi]
  73. [gfontapi]: https://code.google.com/apis/webfonts/docs/webfont_loader.html