Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 349 lines (262 sloc) 15.485 kb
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
1 # Web Font Loader
01bb4cc @rcarver initial commit
rcarver authored
2
a3d9cca Removed ascender module
Venkat authored
3 Web Font 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. The Web Font Loader is able to load fonts from [Google Fonts](http://www.google.com/fonts/), [Typekit](http://www.typekit.com/), [Fonts.com](http://www.fonts.com/), and [Fontdeck](http://fontdeck.com/), as well as self-hosted web fonts. It is co-developed by [Google](http://www.google.com/) and [Typekit](http://www.typekit.com).
01bb4cc @rcarver initial commit
rcarver authored
4
cdcf7fe @PeterDaveHello Use svg instead of png to get better image quality
PeterDaveHello authored
5 [![Build Status](https://travis-ci.org/typekit/webfontloader.svg?branch=master)](https://travis-ci.org/typekit/webfontloader)
887c9c1 @bramstein Add Travis build status image.
bramstein authored
6
c1f200c @bramstein Second pass
bramstein authored
7 ## Contents
8
9 * [Get started](#get-started)
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
10 * [Configuration](#configuration)
c1f200c @bramstein Second pass
bramstein authored
11 * [Events](#events)
26228da @benfoxall Corrected readme contents links
benfoxall authored
12 * [Timeout](#timeouts)
c1f200c @bramstein Second pass
bramstein authored
13 * [Iframes](#iframes)
14 * [Modules](#modules)
15 * [Custom](#custom)
16 * [Fontdeck](#fontdeck)
26228da @benfoxall Corrected readme contents links
benfoxall authored
17 * [Fonts.com](#fontscom)
c1f200c @bramstein Second pass
bramstein authored
18 * [Google](#google)
19 * [Typekit](#typekit)
20 * [Browser support](#browser-support)
26228da @benfoxall Corrected readme contents links
benfoxall authored
21 * [License](#copyright-and-license)
f3b95fb @rcarver events and transitions docs
rcarver authored
22
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
23 ## Get Started
38754d2 @rcarver update docs
rcarver authored
24
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
25 To use the Web Font Loader library, just include it in your page and tell it which fonts to load. For example, you could load fonts from [Google Fonts](http://www.google.com/fonts/) using the Web Font Loader hosted on [Google Hosted Libraries](https://developers.google.com/speed/libraries/) using the following code.
f33daf1 @rcarver document the demos
rcarver authored
26
433a8cc @AgtLucas Update README.md
AgtLucas authored
27 ```html
a6787fe @zackify update version number
zackify authored
28 <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
433a8cc @AgtLucas Update README.md
AgtLucas authored
29 <script>
0f80b43 @bramstein Fix indentation in first example.
bramstein authored
30 WebFont.load({
31 google: {
32 families: ['Droid Sans', 'Droid Serif']
33 }
34 });
433a8cc @AgtLucas Update README.md
AgtLucas authored
35 </script>
36 ```
f33daf1 @rcarver document the demos
rcarver authored
37
c0d3338 @bramstein Revert "Use v1.4.8 in the documentation." The change itself is fine, but
bramstein authored
38 Alternatively, you can link to the latest `1.x` version of the Web Font Loader by using `//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js` as the `script` source. Note that the version in this url is less specific. It will always load the latest `1.x` version, but it also has a shorter cache time to ensure that your page gets updates in a timely manner. For performance reasons, we recommend using an explicit version number (such as `1.4.7`) in urls when using the Web Font Loader in production. You can manually update the Web Font Loader version number in the url when you want to adopt a new version.
cc24fc1 @bramstein Change Google CDN urls to explicit version and add note about "latest" u...
bramstein authored
39
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
40 It is also possible to use the Web Font Loader asynchronously. For example, to load [Typekit](http://www.typekit.com) fonts asynchronously, you could use the following code.
dd648f7 @rcarver improved readme
rcarver authored
41
433a8cc @AgtLucas Update README.md
AgtLucas authored
42 ```html
43 <script>
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
44 WebFontConfig = {
45 typekit: { id: 'xxxxxx' }
46 };
47
48 (function() {
49 var wf = document.createElement('script');
50 wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
fbde181 @bramstein Update WFL version in examples.
bramstein authored
51 '://ajax.googleapis.com/ajax/libs/webfont/1.5.6/webfont.js';
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
52 wf.type = 'text/javascript';
53 wf.async = 'true';
54 var s = document.getElementsByTagName('script')[0];
55 s.parentNode.insertBefore(wf, s);
56 })();
433a8cc @AgtLucas Update README.md
AgtLucas authored
57 </script>
58 ```
dd648f7 @rcarver improved readme
rcarver authored
59
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
60 Using the Web Font Loader asynchronously avoids blocking your page while loading the JavaScript. Be aware that if the script is used asynchronously, the rest of the page might render before the Web Font Loader is loaded and executed, which can cause a [Flash of Unstyled Text (FOUT)](http://help.typekit.com/customer/portal/articles/6852).
201ca2f @bramstein Add note about async vs. sync.
bramstein authored
61
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
62 The FOUT can be more easily avoided when loading the Web Font Loader synchronously, as it will automatically set the `wf-loading` class on the HTML element as soon as `Webfont.load` has been called. The browser will wait for the script to load before continuing to load the rest of the content, FOUT is avoided.
201ca2f @bramstein Add note about async vs. sync.
bramstein authored
63
c1f200c @bramstein Second pass
bramstein authored
64 ## Configuration
65
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
66 The Web Font Loader configuration is defined by a global variable named `WebFontConfig`, or passed directly to the `WebFont.load` method. It defines which fonts to load from each web font provider and gives you the option to specify callbacks for certain events. When using the asynchronous approach, you must define the global variable `WebFontConfig` before the code that loads the Web Font Loader (as in the example above).
c1f200c @bramstein Second pass
bramstein authored
67
68 ### Events
dd648f7 @rcarver improved readme
rcarver authored
69
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
70 Web Font Loader provides an event system that developers can hook into. It gives you notifications of the font loading sequence in both CSS and JavaScript.
dd648f7 @rcarver improved readme
rcarver authored
71
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
72 * `loading` - This event is triggered when all fonts have been requested.
08d0873 Language tweaks and improvements, and get rid of extra whitespace
Sean McBride authored
73 * `active` - This event is triggered when the fonts have rendered.
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
74 * `inactive` - This event is triggered when the browser does not support linked fonts *or* if none of the fonts could be loaded.
75 * `fontloading` - This event is triggered once for each font that's loaded.
76 * `fontactive` - This event is triggered once for each font that renders.
77 * `fontinactive` - This event is triggered if the font can't be loaded.
78
6dd9524 @bramstein Fix a couple typos
bramstein authored
79 CSS events are implemented as classes on the `html` element. The following classes are set on the `html` element:
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
80
433a8cc @AgtLucas Update README.md
AgtLucas authored
81 ```css
82 .wf-loading
83 .wf-active
84 .wf-inactive
85 .wf-<familyname>-<fvd>-loading
86 .wf-<familyname>-<fvd>-active
87 .wf-<familyname>-<fvd>-inactive
88 ```
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
89
2ea8359 @bramstein Added async example and other minor updates.
bramstein authored
90 The `<familyname>` placeholder will be replaced by a sanitized version of the name of each font family. Spaces and underscores are removed from the name, and all characters are converted to lower case. For example, `Droid Sans` becomes `droidsans`. The `<fvd>` placeholder is a [Font Variation Description](https://github.com/typekit/fvd). Put simply, it's a shorthand for describing the style and weight of a particular font. Here are a few examples:
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
91
433a8cc @AgtLucas Update README.md
AgtLucas authored
92 ```css
93 /* n4 */
94 @font-face { font-style: normal; font-weight: normal; }
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
95
433a8cc @AgtLucas Update README.md
AgtLucas authored
96 /* i7 */
97 @font-face { font-style: italic; font-weight: bold; }
98 ```
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
99
08d0873 Language tweaks and improvements, and get rid of extra whitespace
Sean McBride authored
100 Keep in mind that `font-weight: normal` maps to `font-weight: 400` and `font-weight: bold` maps to `font-weight: 700`. If no style/weight is specified, the default `n4` (`font-style: normal; font-weight: normal;`) will be used.
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
101
08d0873 Language tweaks and improvements, and get rid of extra whitespace
Sean McBride authored
102 If fonts are loaded multiple times on a single page, the CSS classes continue to update to reflect the current state of the page. The global `wf-loading` class is applied whenever fonts are being requested (even if other fonts are already active or inactive). The `wf-inactive` class is applied only if none of the fonts on the page have rendered. Otherwise, the `wf-active` class is applied (even if some fonts are inactive).
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
103
6872d6e @bramstein Rewrite so all examples use WebFontConfig option.
bramstein authored
104 JavaScript events are implemented as callback functions on the `WebFontConfig` configuration object.
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
105
433a8cc @AgtLucas Update README.md
AgtLucas authored
106 ```javascript
107 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
108 loading: function() {},
109 active: function() {},
110 inactive: function() {},
111 fontloading: function(familyName, fvd) {},
112 fontactive: function(familyName, fvd) {},
113 fontinactive: function(familyName, fvd) {}
433a8cc @AgtLucas Update README.md
AgtLucas authored
114 };
115 ```
2ea8359 @bramstein Added async example and other minor updates.
bramstein authored
116
08d0873 Language tweaks and improvements, and get rid of extra whitespace
Sean McBride authored
117 The `fontloading`, `fontactive` and `fontinactive` callbacks are passed the family name and font variation description of the font that concerns the event.
dd648f7 @rcarver improved readme
rcarver authored
118
0607a7c @bramstein Add options to disable events and setting of classes on the HTML element...
bramstein authored
119 It is possible to disable setting classes on the HTML element by setting the `classes` configuration parameter to `false` (defaults to `true`).
120
121 ```javascript
122 WebFontConfig = {
123 classes: false
124 };
125 ```
126
127 You can also disable font events (callbacks) by setting the `events` parameter to `false` (defaults to `true`).
128
129 ```javascript
130 WebFontConfig = {
131 events: false
132 };
133 ```
134
135 If both events and classes are disabled, the Web Font Loader does not perform font watching and only acts as a way to insert @font-face rules in the document.
136
c1f200c @bramstein Second pass
bramstein authored
137 ### Timeouts
dd648f7 @rcarver improved readme
rcarver authored
138
3604115 @topaz fix typo in README.md
topaz authored
139 Since the Internet is not 100% reliable, it's possible that a font will fail to load. The `fontinactive` event will be triggered after 5 seconds if the font fails to render. If *at least* one font succesfully renders, the `active` event will be triggered, else the `inactive` event will be triggered.
87e88c6 Update the readme with info about this new context configuration option
Sean McBride authored
140
6872d6e @bramstein Rewrite so all examples use WebFontConfig option.
bramstein authored
141 You can change the default timeout by using the `timeout` option on the `WebFontConfig` object.
87e88c6 Update the readme with info about this new context configuration option
Sean McBride authored
142
433a8cc @AgtLucas Update README.md
AgtLucas authored
143 ```javascript
144 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
145 google: {
146 families: ['Droid Sans']
147 },
148 timeout: 2000 // Set the timeout to two seconds
433a8cc @AgtLucas Update README.md
AgtLucas authored
149 };
150 ```
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
151
4ff2c6a @bramstein Update timeout in README.
bramstein authored
152 The timeout value should be in milliseconds, and defaults to 3000 milliseconds (3 seconds) if not supplied.
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
153
c1f200c @bramstein Second pass
bramstein authored
154 ### Iframes
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
155
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
156 Usually, it's easiest to include a copy of Web Font Loader in every window where fonts are needed, so that each window manages its own fonts. However, if you need to have a single window manage fonts for multiple same-origin child windows or iframes that are built up using JavaScript, Web Font Loader supports that as well. Just use the optional `context` configuration option and give it a reference to the target window for loading:
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
157
433a8cc @AgtLucas Update README.md
AgtLucas authored
158 ```javascript
159 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
160 google: {
161 families: ['Droid Sans']
162 },
163 context: frames['my-child']
433a8cc @AgtLucas Update README.md
AgtLucas authored
164 };
165 ```
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
166
08d0873 Language tweaks and improvements, and get rid of extra whitespace
Sean McBride authored
167 This is an advanced configuration option that isn't needed for most use cases.
168
7a3d412 @bramstein Add modules
bramstein authored
169 ## Modules
170
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
171 Web Font Loader provides a module system so that any web font provider can contribute code that allows their fonts to be loaded. This makes it possible to use multiple web font providers at the same time. The specifics of each provider currently supported by the library are documented here.
7a3d412 @bramstein Add modules
bramstein authored
172
173 ### Custom
174
175 To load fonts from any external stylesheet, use the `custom` module. Here you'll
3828c96 @bramstein Clarify loading font families in existing stylesheets using the custom m...
bramstein authored
176 need to specify the font family names you're trying to load, and optionally the url of the stylesheet that provides the `@font-face` declarations for those fonts.
7a3d412 @bramstein Add modules
bramstein authored
177
178 You can specify a specific font variation or set of variations to load and watch
08d0873 Language tweaks and improvements, and get rid of extra whitespace
Sean McBride authored
179 by appending the variations separated by commas to the family name separated by
7a3d412 @bramstein Add modules
bramstein authored
180 a colon. Variations are specified using [FVD notation](https://github.com/typekit/fvd).
181
433a8cc @AgtLucas Update README.md
AgtLucas authored
182 ```javascript
183 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
184 custom: {
185 families: ['My Font', 'My Other Font:n4,i4,n7'],
186 urls: ['/fonts.css']
187 }
433a8cc @AgtLucas Update README.md
AgtLucas authored
188 };
189 ```
7a3d412 @bramstein Add modules
bramstein authored
190
02f7da9 Add an example of the CSS file to the custom CSS example
Sean McBride authored
191 In this example, the `fonts.css` file might look something like this:
192
433a8cc @AgtLucas Update README.md
AgtLucas authored
193 ```css
194 @font-face {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
195 font-family: 'My Font';
196 src: ...;
433a8cc @AgtLucas Update README.md
AgtLucas authored
197 }
198 @font-face {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
199 font-family: 'My Other Font';
200 font-style: normal;
201 font-weight: normal; /* or 400 */
202 src: ...;
433a8cc @AgtLucas Update README.md
AgtLucas authored
203 }
204 @font-face {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
205 font-family: 'My Other Font';
206 font-style: italic;
207 font-weight: normal; /* or 400 */
208 src: ...;
433a8cc @AgtLucas Update README.md
AgtLucas authored
209 }
210 @font-face {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
211 font-family: 'My Other Font';
212 font-style: normal;
213 font-weight: bold; /* or 700 */
214 src: ...;
433a8cc @AgtLucas Update README.md
AgtLucas authored
215 }
216 ```
02f7da9 Add an example of the CSS file to the custom CSS example
Sean McBride authored
217
3828c96 @bramstein Clarify loading font families in existing stylesheets using the custom m...
bramstein authored
218 If your fonts are already included in another stylesheet you can also leave out the `urls` array and just specify font family names to start font loading. As long as the names match those that are declared in the `families` array, the proper loading classes will be applied to the html element.
973fc31 @DavidQL Update README to explain custom font options without specifying a styles...
DavidQL authored
219
433a8cc @AgtLucas Update README.md
AgtLucas authored
220 ```html
fbde181 @bramstein Update WFL version in examples.
bramstein authored
221 <script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.6/webfont.js"></script>
bd32597 @DavidQL Update README to explain custom font options without specifying a styles...
DavidQL authored
222 <script>
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
223 WebFont.load({
224 custom: {
225 families: ['My Font']
226 }
227 });
bd32597 @DavidQL Update README to explain custom font options without specifying a styles...
DavidQL authored
228 </script>
229
230 <style type="text/css">
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
231 @font-face {
232 font-family:"My Font";
233 src:url("assets/fonts/my_font.woff") format("woff");
234 }
bd32597 @DavidQL Update README to explain custom font options without specifying a styles...
DavidQL authored
235 </style>
017537b @DavidQL Update README to explain custom font options without specifying a styles...
DavidQL authored
236 ```
973fc31 @DavidQL Update README to explain custom font options without specifying a styles...
DavidQL authored
237
160a6f1 @bramstein Clarify how test strings are used in the README.
bramstein authored
238 The custom module also supports customizing the test strings that are used to determine whether or not a font has loaded. This can be used to load fonts with custom subsets or glyphs in the private use unicode area.
b07d830 @bramstein Add support for user specified test strings to the custom module.
bramstein authored
239
433a8cc @AgtLucas Update README.md
AgtLucas authored
240 ```javascript
241 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
242 custom: {
243 families: ['My Font'],
244 testStrings: {
245 'My Font': '\uE003\uE005'
246 }
247 }
433a8cc @AgtLucas Update README.md
AgtLucas authored
248 };
249 ```
b07d830 @bramstein Add support for user specified test strings to the custom module.
bramstein authored
250
160a6f1 @bramstein Clarify how test strings are used in the README.
bramstein authored
251 Tests strings should be specified on a per font basis and contain at least one character. If not specified the default test string (`BESbswy`) is used.
b07d830 @bramstein Add support for user specified test strings to the custom module.
bramstein authored
252
7a3d412 @bramstein Add modules
bramstein authored
253 ### Fontdeck
254
255 To use the [Fontdeck](http://fontdeck.com/) module, specify the ID of your website. You can find this ID on the website page within your account settings.
256
433a8cc @AgtLucas Update README.md
AgtLucas authored
257 ```javascript
258 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
259 fontdeck: {
260 id: 'xxxxx'
261 }
433a8cc @AgtLucas Update README.md
AgtLucas authored
262 };
263 ```
7a3d412 @bramstein Add modules
bramstein authored
264
265 ### Fonts.com
266
267 When using [Fonts.com web fonts](http://webfonts.fonts.com/) specify your Project ID.
268
433a8cc @AgtLucas Update README.md
AgtLucas authored
269 ```javascript
270 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
271 monotype: {
272 projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
273 version: 12345 // (optional, flushes the CDN cache)
274 }
433a8cc @AgtLucas Update README.md
AgtLucas authored
275 };
276 ```
7a3d412 @bramstein Add modules
bramstein authored
277
278 The Fonts.com module has an optional `version` option which acts as a cache-buster.
279
280 ### Google
281
e813aec @bramstein Clarify Google module syntax.
bramstein authored
282 Using [Google's Font API](https://code.google.com/apis/webfonts/docs/getting_started.html), name the font families you'd like to load. You can use the same [syntax](https://developers.google.com/fonts/docs/getting_started#Syntax) as in the Font API to specify styles:
7a3d412 @bramstein Add modules
bramstein authored
283
433a8cc @AgtLucas Update README.md
AgtLucas authored
284 ```javascript
285 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
286 google: {
287 families: ['Droid Sans', 'Droid Serif:bold']
288 }
433a8cc @AgtLucas Update README.md
AgtLucas authored
289 };
290 ```
7a3d412 @bramstein Add modules
bramstein authored
291
c8d1a15 @bramstein Clarify default variation behaviour in the Google module
bramstein authored
292 Sometimes the font you requested doesn't come in the default variation (e.g. `n4`) and you need to explicitly request the variation you want for font events to work (e.g. `n3`, `n7`, etc.). You can also supply the `text` parameter to perform character subsetting:
7a3d412 @bramstein Add modules
bramstein authored
293
433a8cc @AgtLucas Update README.md
AgtLucas authored
294 ```javascript
295 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
296 google: {
297 families: ['Droid Sans', 'Droid Serif'],
298 text: 'abcdedfghijklmopqrstuvwxyz!'
299 }
433a8cc @AgtLucas Update README.md
AgtLucas authored
300 };
301 ```
7a3d412 @bramstein Add modules
bramstein authored
302
08d0873 Language tweaks and improvements, and get rid of extra whitespace
Sean McBride authored
303 The `text` subsetting functionality is only available for the Google module.
7a3d412 @bramstein Add modules
bramstein authored
304
305 ### Typekit
306
08d0873 Language tweaks and improvements, and get rid of extra whitespace
Sean McBride authored
307 When using [Typekit](http://www.typekit.com), specify the Kit to retrieve by its ID. You can find the Kit ID within Typekit's Kit Editor interface.
7a3d412 @bramstein Add modules
bramstein authored
308
433a8cc @AgtLucas Update README.md
AgtLucas authored
309 ```javascript
310 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
311 typekit: {
312 id: 'xxxxxx'
313 }
433a8cc @AgtLucas Update README.md
AgtLucas authored
314 };
315 ```
7a3d412 @bramstein Add modules
bramstein authored
316
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
317 **FYI:** Typekit's own JavaScript is built using the Web Font Loader library and already provides all of the same font event functionality. If you're using Typekit, you should use their embed codes directly unless you also need to load web fonts from other providers on the same page.
08d0873 Language tweaks and improvements, and get rid of extra whitespace
Sean McBride authored
318
c1f200c @bramstein Second pass
bramstein authored
319 ## Browser Support
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
320
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
321 Every web browser has varying levels of support for fonts linked via `@font-face`. Web Font Loader determines support for web fonts is using the browser's user agent string. The user agent string may claim to support a web font format when it in fact does not. This is especially noticeable on mobile browsers with a "Desktop" mode, which usually identify as Chrome on Linux. In this case a web font provider may decide to send WOFF fonts to the device because the real desktop Chrome supports it, while the mobile browser does not. The Web Font Loader is not designed to handle these cases and it defaults to believing what's in the user agent string. Web font providers can build on top of the basic Web Font Loader functionality to handle these special cases individually.
dd648f7 @rcarver improved readme
rcarver authored
322
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
323 If Web Font Loader determines that the current browser does not support `@font-face`, the `inactive` event will be triggered.
dd648f7 @rcarver improved readme
rcarver authored
324
c7af03d Change README instances of "WebFont Loader" to "Web Font Loader"
Sean McBride authored
325 When loading fonts from multiple providers, each provider may or may not support a given browser. If Web Font Loader determines that the current browser can support `@font-face`, and *at least* one provider is able to serve fonts, the fonts from that provider will be loaded. When finished, the `active` event will be triggered.
dd648f7 @rcarver improved readme
rcarver authored
326
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
327 For fonts loaded from supported providers, the `fontactive` event will be triggered. For fonts loaded from a provider that *does not* support the current browser, the `fontinactive` event will be triggered.
dd648f7 @rcarver improved readme
rcarver authored
328
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
329 For example:
f33daf1 @rcarver document the demos
rcarver authored
330
433a8cc @AgtLucas Update README.md
AgtLucas authored
331 ```javascript
332 WebFontConfig = {
759b46c @AgtLucas Fixing indentation.
AgtLucas authored
333 providerA: 'Family1',
334 providerB: 'Family2'
433a8cc @AgtLucas Update README.md
AgtLucas authored
335 };
336 ```
256486c Update the README to reflect the testing updates (and other fixes)
Sean McBride authored
337
d0c5c17 @bramstein First pass at merging and rewriting documentation.
bramstein authored
338 If `providerA` can serve fonts to a browser, but `providerB` cannot, The `fontinactive` event will be triggered for `Family2`. The `fontactive` event will be triggered for `Family1` once it loads, as will the `active` event.
256486c Update the README to reflect the testing updates (and other fixes)
Sean McBride authored
339
8e63406 @bramstein Remove appendix from LICENSE and add Copyright and License section to RE...
bramstein authored
340 ## Copyright and License
dd648f7 @rcarver improved readme
rcarver authored
341
8e63406 @bramstein Remove appendix from LICENSE and add Copyright and License section to RE...
bramstein authored
342 Web Font Loader Copyright (c) 2010 Adobe Systems Incorporated, Google Incorporated.
343
344 Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
345
346 http://www.apache.org/licenses/LICENSE-2.0
347
348 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
Something went wrong with that request. Please try again.