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