├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── LICENSE.md
├── README.md
├── bower.json
├── package.json
├── test
    ├── test.css
    └── visible.html
├── typekit-cache.js
└── typekit-cache.min.js


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true
 4 |   },
 5 |   extends: "eslint:recommended",
 6 |   parserOptions: {
 7 |     ecmaVersion: 5
 8 |   }
 9 | };
10 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | test/* linguist-vendored
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | ```
 2 | The MIT License (MIT)
 3 | 
 4 | Copyright (c) 2015-2019 Morris Brodersen <mb@morrisbrodersen.de>
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in
14 | all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 | THE SOFTWARE.
23 | ```
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Typekit Cache
 2 | 
 3 | _Revision 14_
 4 | 
 5 | **Current Status:** typekit-cache only works for older Typekit installations (using JavaScript). Newer installations use a `<link>` tag; all resources are cached properly by the browser
 6 | and served from disk on a revisit. This cannot be further improved so upgrading to the `<link>` embed and removing typekit-cache is recommended.
 7 | 
 8 | ---
 9 | 
10 | Keeps a site's [Typekit][tk] in `localStorage` and injects it on page load.
11 | Eliminates the annoying Flash Of Invisible/Unstyled Text (FOUT) and provides
12 | better UX for slow or offline connections.
13 | 
14 | The same requests are sent as in loading a Typekit regularly, and the Typekit embed code is unaltered.
15 | However, using this script may still violate the [Typekit Terms Of Use][tou].
16 | 
17 | ## Usage
18 | 
19 | Copy the contents of [typekit-cache.min.js][min] right before your Typekit (advanced) embed code.
20 | That's it, your website should be caching your Typekit happily.
21 | 
22 | ```html
23 | <script>
24 |   /* contents of typekit-cache.min.js */
25 | </script>
26 | <script>
27 |   (function(d) {
28 |     var config = {
29 |       kitId: 'abcd1234',
30 |       scriptTimeout: 3000
31 |     },
32 |     h=d.documentElement, // ...
33 |   })(document);
34 | </script>
35 | ```
36 | 
37 | ## Notes
38 | 
39 | The regular Typekit behavior is not modified at all.
40 | Exceptions visible in the console (e.g. if the storage is not available) can be safely ignored.
41 | However, you should use separate `<script>` tags to ensure the Typekit embed code is still run if an exception occurs.
42 | 
43 | In addition to the regular `wf-*` classes, the `wf-cached` class is added to the `<html>` tag on cache hit.
44 | 
45 | To use `sessionStorage` instead, just replace the `localStorage` reference.
46 | 
47 | ## Contributing
48 | 
49 | Make sure PRs contain an updated minified version.
50 | Run `npm run prepublish` to build it.
51 | 
52 | ## Contributors
53 | 
54 | - [Artem Gordinsky](https://github.com/ArtemGordinsky)
55 | - [Dave Garwacke](https://github.com/ifyoumakeit)
56 | - [Michael Baldry](https://github.com/brightbits)
57 | - [Jan Persoons](https://github.com/janpersoons)
58 | - [Tristan Koch](https://github.com/trkoch)
59 | - [Luke Bussey](https://github.com/lukebussey)
60 | - [Viktor Kuliebiakin](https://github.com/kuliebiakin)
61 | 
62 | Thanks!
63 | 
64 | [tk]: https://typekit.com/
65 | [tou]: https://fonts.adobe.com/
66 | [min]: https://raw.githubusercontent.com/morris/typekit-cache/master/typekit-cache.min.js
67 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "typekit-cache",
 3 |   "description": "Keeps a site's Typekit 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.",
 4 |   "main": "typekit-cache.js",
 5 |   "authors": [
 6 |     "Morris Brodersen <mb@morrisbrodersen.de>"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "keywords": [
10 |     "typekit"
11 |   ],
12 |   "homepage": "https://github.com/morris/typekit-cache",
13 |   "moduleType": [],
14 |   "ignore": [
15 |     "**/.*",
16 |     "node_modules",
17 |     "bower_components",
18 |     "test",
19 |     "tests"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "typekit-cache",
 3 |   "version": "1.14.1",
 4 |   "description": "Keeps a site's Typekit 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.",
 5 |   "main": "typekit-cache.js",
 6 |   "directories": {
 7 |     "test": "test"
 8 |   },
 9 |   "devDependencies": {
10 |     "eslint": "^5.16.0",
11 |     "prettier": "^1.17.0",
12 |     "terser": "^3.17.0"
13 |   },
14 |   "scripts": {
15 |     "format": "prettier --write typekit-cache.js",
16 |     "lint": "eslint typekit-cache.js",
17 |     "build": "terser typekit-cache.js -o typekit-cache.min.js --compress --mangle",
18 |     "prepublish": "npm run build"
19 |   },
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/morris/typekit-cache.git"
23 |   },
24 |   "keywords": [
25 |     "typekit"
26 |   ],
27 |   "author": "Morris Brodersen <mb@morrisbrodersen.de>",
28 |   "license": "MIT",
29 |   "bugs": {
30 |     "url": "https://github.com/morris/typekit-cache/issues"
31 |   },
32 |   "homepage": "https://github.com/morris/typekit-cache#readme"
33 | }
34 | 


--------------------------------------------------------------------------------
/test/test.css:
--------------------------------------------------------------------------------
 1 | .data {
 2 |   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg=);
 3 | }
 4 | 
 5 | .relative {
 6 |   background: url(/favicon.ico);
 7 | }
 8 | 
 9 | .relative2 {
10 |   background: url(/favicon.ico);
11 | }
12 | 
13 | .absolute {
14 |   background: url(https://github.com/favicon.ico);
15 | }
16 | 


--------------------------------------------------------------------------------
/test/visible.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Typekit Cache Visibility Test</title>
 6 | 
 7 |     <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.20.0.css">
 8 |     <script src="https://code.jquery.com/qunit/qunit-1.20.0.js"></script>
 9 |     <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
10 |   </head>
11 | 
12 |   <body>
13 |     <div style="overflow: hidden">
14 |       <h4 id="a" style="float: left; font-family: kinescope, sans-serif">Test&nbsp;</h4>
15 |       <h4 id="b" style="float: left; font-family: sans-serif">Test&nbsp;</h4>
16 |     </div>
17 | 
18 |     <p>
19 |       <img src="https://media3.giphy.com/media/ZvsIuK3ovaHoA/200w.webp" width="150">
20 |       <img src="https://media3.giphy.com/media/ZvsIuK3ovaHoA/200w.webp" width="150">
21 |     </p>
22 | 
23 |     <div id="qunit"></div>
24 |     <div id="qunit-fixture"></div>
25 | 
26 |     <p><button onclick="javascript:localStorage.removeItem('tk')">Reset localStorage</button></p>
27 | 
28 |     <script>
29 |       var kitId = window.location.hash.slice(1);
30 |       QUnit.test('The Typekit should work', function (assert) {
31 |         assert.ok(kitId, 'A kitId of a Typekit with the Kinescope font is required: visible.html#<kitId>');
32 | 
33 |         var done = assert.async();
34 |         setTimeout(function () {
35 |           assert.ok($('html').is('.wf-active'), '.wf-active class is set');
36 |           assert.notEqual($('#a').width(), $('#b').width(), 'Kinescope font is visible');
37 |           done();
38 |         }, 1500);
39 |       });
40 |     </script>
41 |     <script src="../typekit-cache.js"></script>
42 |     <script>
43 |       (function(d) {
44 |         var config = {
45 |           kitId: kitId,
46 |           scriptTimeout: 3000,
47 |           async: true
48 |         },
49 |         h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};
50 |         // delay inserting the Typekit script for testing
51 |         setTimeout(function () { s.parentNode.insertBefore(tk,s); }, 1000);
52 |       })(document);
53 |     </script>
54 |   </body>
55 | </html>
56 | 


--------------------------------------------------------------------------------
/typekit-cache.js:
--------------------------------------------------------------------------------
 1 | (function(
 2 |   // Constants
 3 |   document,
 4 |   style,
 5 |   innerHTML,
 6 |   getElementsByTagName,
 7 |   // Config
 8 |   storage,
 9 |   key,
10 |   pattern,
11 |   delay,
12 |   // Vars
13 |   temp,
14 |   next,
15 |   i,
16 |   css
17 | ) {
18 |   // If CSS is in cache, append it to <head> in a <style> tag.
19 | 
20 |   if (storage[key]) {
21 |     temp = document.createElement(style);
22 |     temp[innerHTML] = storage[key];
23 |     document[getElementsByTagName]("head")[0].appendChild(temp);
24 |     document.documentElement.className += " wf-cached";
25 |   }
26 | 
27 |   // Find and cache the Typekit CSS.
28 | 
29 |   (function cache() {
30 |     // Find matching CSS.
31 |     temp = document[getElementsByTagName](style);
32 |     next = "";
33 | 
34 |     for (i = 0; i < temp.length; i++) {
35 |       css = temp[i][innerHTML];
36 |       if (css && css.match(pattern)) {
37 |         next += css;
38 |       }
39 |     }
40 | 
41 |     // If there's matching CSS, cache it.
42 |     // Prefix cached CSS so it does not match the pattern.
43 |     if (next) storage[key] = "/**/" + next;
44 | 
45 |     // Retry using exponential backoff.
46 |     setTimeout(cache, (delay += delay));
47 |   })();
48 | })(
49 |   // Constants
50 |   document,
51 |   "style",
52 |   "innerHTML",
53 |   "getElementsByTagName",
54 |   // Config
55 |   localStorage,
56 |   "tk",
57 |   /^@font|^\.tk-/,
58 |   100
59 | );
60 | 


--------------------------------------------------------------------------------
/typekit-cache.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t,n,a,l,m,c,o,s,d,g,i){l.tk&&((s=e.createElement("style")).innerHTML=l.tk,e.getElementsByTagName("head")[0].appendChild(s),e.documentElement.className+=" wf-cached"),function t(){for(s=e.getElementsByTagName("style"),d="",g=0;g<s.length;g++)(i=s[g].innerHTML)&&i.match(c)&&(d+=i);d&&(l.tk="/**/"+d),setTimeout(t,o+=o)}()}(document,0,0,0,localStorage,0,/^@font|^\.tk-/,100);


--------------------------------------------------------------------------------