In order to support smooth transitions between webfont providers, WebFont Loader provides a common interface to each provider. It also makes it trivial to load fonts from multiple providers.
This is especially powerful when building your page against the events because the same events are triggered regardless of the provider.
Here are a few scenarios.
You can get started with web fonts quickly and easily by just using Google.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ['Droid Sans']
}
});
</script>
If you discover that Google doesn't have your preferred typeface, you may wish to add fonts from Typekit.
(first sign up for Typekit, add fonts and retrieve your Kit ID)
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ['Droid Sans']
},
typekit: {
id: 'abc1def'
}
});
</script>
You may now discover that the number of HTTP requests has increased by pulling fonts from both Google and Typekit. Since Typekit has all of the fonts that Google has, let's drop that dependency.
(first add 'Droid Sans' to your Kit with ID 'abc1def')
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
WebFont.load({,
typekit: {
id: 'abc1def'
}
});
</script>
You may wish to reduce HTTP requests further by dropping the dependency on WebFont Loader to work directly with Typekit. Typekit's API is fully compatible with WebFont Loader.
<script type="text/javascript" src="http://use.typekit.com/abc1def.js"></script>
<script type="text/javascript">
WebFont.load();
</script>
Or as pure Typekit
<script type="text/javascript" src="http://use.typekit.com/abc1def.js"></script>
<script type="text/javascript">
Typekit.load();
</script>
You can get started with web fonts quickly and easily by just using Google.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ['Droid Sans']
}
});
</script>
If you discover that Google doesn't have your preferred typeface, you may wish to add fonts from Fonts.com Web fonts.
(first sign up for Fonts.com Web fonts, add fonts and retrieve your Project ID)
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
WebFont.load({
monotype: {
projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
}
});
</script>
Or as pure Fonts.com Web fonts API
<script type="text/javascript" src="http://fast.fonts.com/jsapi/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.js"></script>
If you already have fonts and the @font-face
rules written, you might
already be using them in your page.
<link type="text/css" rel="stylesheet" href="/fonts.css">
To add events support, use the custom
module to load your stylesheet,
and name the font families that the stylesheet provides.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
WebFont.load({
default: {
families: ['My Font'],
urls: ['/fonts.css']
}
});
</script>