https://github.com/morris/typekit-cache
Keeps a site's Typekit in localStorage and injects it on page load, eliminating the Flash Of Invisible/Unstyled Text.
https://github.com/morris/typekit-cache
typekit ux webfonts
Last synced: about 1 month ago
JSON representation
Keeps a site's Typekit in localStorage and injects it on page load, eliminating the Flash Of Invisible/Unstyled Text.
- Host: GitHub
- URL: https://github.com/morris/typekit-cache
- Owner: morris
- License: other
- Created: 2015-02-17T02:43:28.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-10-31T10:52:35.000Z (over 4 years ago)
- Last Synced: 2025-03-31T07:07:56.111Z (about 2 months ago)
- Topics: typekit, ux, webfonts
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 251
- Watchers: 21
- Forks: 17
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Typekit Cache
_Revision 14_
**Current Status:** typekit-cache only works for older Typekit installations (using JavaScript). Newer installations use a `` tag; all resources are cached properly by the browser
and served from disk on a revisit. This cannot be further improved so upgrading to the `` embed and removing typekit-cache is recommended.
---
Keeps a site's [Typekit][tk] in `localStorage` and injects it on page load.
Eliminates the annoying Flash Of Invisible/Unstyled Text (FOUT) and provides
better UX for slow or offline connections.
The same requests are sent as in loading a Typekit regularly, and the Typekit embed code is unaltered.
However, using this script may still violate the [Typekit Terms Of Use][tou].
## Usage
Copy the contents of [typekit-cache.min.js][min] right before your Typekit (advanced) embed code.
That's it, your website should be caching your Typekit happily.
```html
/* contents of typekit-cache.min.js */
(function(d) {
var config = {
kitId: 'abcd1234',
scriptTimeout: 3000
},
h=d.documentElement, // ...
})(document);
```
## Notes
The regular Typekit behavior is not modified at all.
Exceptions visible in the console (e.g. if the storage is not available) can be safely ignored.
However, you should use separate `` tags to ensure the Typekit embed code is still run if an exception occurs.
In addition to the regular `wf-*` classes, the `wf-cached` class is added to the `<html>` tag on cache hit.
To use `sessionStorage` instead, just replace the `localStorage` reference.
## Contributing
Make sure PRs contain an updated minified version.
Run `npm run prepublish` to build it.
## Contributors
- [Artem Gordinsky](https://github.com/ArtemGordinsky)
- [Dave Garwacke](https://github.com/ifyoumakeit)
- [Michael Baldry](https://github.com/brightbits)
- [Jan Persoons](https://github.com/janpersoons)
- [Tristan Koch](https://github.com/trkoch)
- [Luke Bussey](https://github.com/lukebussey)
- [Viktor Kuliebiakin](https://github.com/kuliebiakin)
Thanks!
[tk]: https://typekit.com/
[tou]: https://fonts.adobe.com/
[min]: https://raw.githubusercontent.com/morris/typekit-cache/master/typekit-cache.min.js