Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 108 lines (77 sloc) 2.961 kb
f3b95fb @rcarver events and transitions docs
rcarver authored
1 # Transitions
2
11364cc @rcarver update name in docs
rcarver authored
3 In order to support smooth transitions between webfont providers, WebFont
4 Loader provides a common interface to each provider. It also makes it trivial
5 to load fonts from multiple providers.
f3b95fb @rcarver events and transitions docs
rcarver authored
6
7 This is especially powerful when building your page against the [events][]
8 because the same events are triggered regardless of the provider.
9
10 Here are a few scenarios.
11
12 ## From Google Fonts to Typekit
13
11364cc @rcarver update name in docs
rcarver authored
14 ### Step 1: Use Google with WebFont Loader
f3b95fb @rcarver events and transitions docs
rcarver authored
15
16 You can get started with web fonts quickly and easily by just using Google.
17
18 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
19 <script type="text/javascript">
20 WebFont.load({
21 google: {
38754d2 @rcarver update docs
rcarver authored
22 families: ['Droid Sans']
f3b95fb @rcarver events and transitions docs
rcarver authored
23 }
24 });
25 </script>
26
27 ### Step 2: Add Typekit
28
29 If you discover that Google doesn't have your preferred typeface, you may wish
30 to add fonts from Typekit.
31
11364cc @rcarver update name in docs
rcarver authored
32 (first sign up for Typekit, add fonts and retrieve your Kit ID)
f3b95fb @rcarver events and transitions docs
rcarver authored
33
34 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
35 <script type="text/javascript">
36 WebFont.load({
37 google: {
38754d2 @rcarver update docs
rcarver authored
38 families: ['Droid Sans']
f3b95fb @rcarver events and transitions docs
rcarver authored
39 },
11364cc @rcarver update name in docs
rcarver authored
40 typekit: {
41 id: 'abc1def'
42 }
f3b95fb @rcarver events and transitions docs
rcarver authored
43 });
44 </script>
45
46 ### Step 3 Remove Google
47
48 You may now discover that the number of HTTP requests has increased by pulling
49 fonts from both Google and Typekit. Since Typekit has all of the fonts that
50 Google has, let's drop that dependency.
51
52 (first add 'Droid Sans' to your Kit with ID 'abc1def')
53
54 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
55 <script type="text/javascript">
11364cc @rcarver update name in docs
rcarver authored
56 WebFont.load({,
57 typekit: {
58 id: 'abc1def'
59 }
f3b95fb @rcarver events and transitions docs
rcarver authored
60 });
61 </script>
62
11364cc @rcarver update name in docs
rcarver authored
63 ### Step 4: Remove WebFont Loader
f3b95fb @rcarver events and transitions docs
rcarver authored
64
11364cc @rcarver update name in docs
rcarver authored
65 You may wish to reduce HTTP requests further by dropping the dependency on
66 WebFont Loader to work directly with Typekit. Typekit's API is fully
67 compatible with WebFont Loader.
f3b95fb @rcarver events and transitions docs
rcarver authored
68
69 <script type="text/javascript" src="http://use.typekit.com/abc1def.js"></script>
70 <script type="text/javascript">
71 WebFont.load();
72 </script>
73
74 Or as pure Typekit
75
76 <script type="text/javascript" src="http://use.typekit.com/abc1def.js"></script>
77 <script type="text/javascript">
78 Typekit.load();
79 </script>
80
81
82 ## Add events to self-hosted fonts
83
84 ### Step 1: Link to your own stylesheet
85
86 If you already have fonts and the `@font-face` rules written, you might
87 already be using them in your page.
88
89 <link type="text/css" rel="stylesheet" href="/fonts.css">
90
11364cc @rcarver update name in docs
rcarver authored
91 ### Step 2: Use WebFont Loader
f3b95fb @rcarver events and transitions docs
rcarver authored
92
11364cc @rcarver update name in docs
rcarver authored
93 To add [events][] support, use the `custom` module to load your stylesheet,
f3b95fb @rcarver events and transitions docs
rcarver authored
94 and name the font families that the stylesheet provides.
95
96 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
97 <script type="text/javascript">
98 WebFont.load({
99 default: {
11364cc @rcarver update name in docs
rcarver authored
100 families: ['My Font'],
101 urls: ['/fonts.css']
102 }
f3b95fb @rcarver events and transitions docs
rcarver authored
103 });
104 </script>
105
106
107 [events]: EVENTS.md
Something went wrong with that request. Please try again.