├── tinywfl-min.js
├── LICENSE
├── tinywfl.js
└── README.md


/tinywfl-min.js:
--------------------------------------------------------------------------------
1 | /*v1.0.0*/function TinyWFL(e,t){function n(){for(f=(new Date).getTime(),l=0;l<e.length;l++)s=m.createElement("span"),s.style.cssText="position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-family:serif;",s.appendChild(m.createTextNode("BESbswy")),m.body.appendChild(s),g[l]=s,y[l]=g[l].offsetWidth,g[l].style.fontFamily='"'+e[l]+'",serif';c.className+=h,o()}function o(){if((new Date).getTime()-f>=u)return i();for(r=1,l=0;l<e.length;l++)T[l]||(d=g[l].offsetWidth,d&&y[l]!=d?(T[l]=1,c.className+=h+"-"+e[l].toLowerCase().replace(/[^a-z0-9_\-]/,""),t&&t(e[l])):r=0);r?i():setTimeout(o,p)}function i(){for(l=0;l<e.length;l++)g[l].parentNode.removeChild(g[l])}function a(){m.body?n():setTimeout(a,0)}var f,l,s,d,r,m=document,c=m.documentElement,h=" twfl",p=25,u=5e3,g=[],y=[],T=[];a()}


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | TinyWFL is licensed under the MIT license
 2 | =========================================
 3 | 
 4 | Copyright (c) 2015 Richard Terry, http://radiac.net/
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 7 | 
 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 9 | 
10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | 


--------------------------------------------------------------------------------
/tinywfl.js:
--------------------------------------------------------------------------------
  1 | /** TinyWFL - Tiny Web Font Loader
  2 |     1.0.0
  3 |     http://radiac.net/projects/tinywfl/
  4 | */
  5 | function TinyWFL(fonts, callbackFn) {
  6 |     /** TinyWFL(fonts[, callbackFn])
  7 |         
  8 |         Sets CSS class names on the html tag:
  9 |             twfl            TinyWFL is enabled
 10 |             twfl-fontname   Lowercase name with non a-z0-9_- chars stripped
 11 |         
 12 |         Arguments:
 13 |             fonts       List of font face names
 14 |             callbackFn  Optional: function to call when a font is loaded
 15 |                         Arguments:
 16 |                             fontName    Name of font that has been loaded
 17 |     */
 18 |     
 19 |     // Polling constants and other variable definitions
 20 |     var doc = document,
 21 |         html = doc.documentElement,
 22 |         prefix = ' twfl',   // Class prefix, with space ready to concat
 23 |         pollFrequency = 25,
 24 |         pollTimeout = 5000,
 25 |         testEls = [],
 26 |         plainWidths = [],
 27 |         isLoaded = [],
 28 |         started, i, testEl, testWidth, allLoaded
 29 |     ;
 30 |     
 31 |     function setupTests() {
 32 |         started = (new Date()).getTime();
 33 |         
 34 |         // Create test elements
 35 |         for (i=0; i<fonts.length; i++) {
 36 |             // Create test element uses test string BESbswy with serif font
 37 |             // and add it to body
 38 |             testEl = doc.createElement('span');
 39 |             testEl.style.cssText = 'position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-family:serif;';
 40 |             testEl.appendChild(doc.createTextNode('BESbswy'));
 41 |             doc.body.appendChild(testEl);
 42 |             testEls[i] = testEl;
 43 |             
 44 |             // Get width of plain font
 45 |             plainWidths[i] = testEls[i].offsetWidth;
 46 |             
 47 |             // Change font to the target font
 48 |             testEls[i].style.fontFamily = '"' + fonts[i] + '",serif';
 49 |         }
 50 |         html.className += prefix;
 51 |         
 52 |         // Test fonts
 53 |         testFonts();
 54 |     }
 55 |         
 56 |     // Poll the DOM to see when the font has loaded
 57 |     function testFonts() {
 58 |         // Test for timeout
 59 |         if ((new Date()).getTime() - started >= pollTimeout) {
 60 |             // Failed to load the font
 61 |             return clean();
 62 |         }
 63 |         
 64 |         // Test for no change
 65 |         allLoaded = 1;
 66 |         for (i=0; i<fonts.length; i++) {
 67 |             if (isLoaded[i]) {
 68 |                 continue;
 69 |             }
 70 |             testWidth = testEls[i].offsetWidth;
 71 |             if (testWidth && plainWidths[i] != testWidth) {
 72 |                 // Width indicates font has changed; set truthy value
 73 |                 isLoaded[i] = 1;
 74 |                 html.className += prefix + '-' + fonts[i].toLowerCase().replace(/[^a-z0-9_\-]/, '');
 75 |                 
 76 |                 // Call callback function
 77 |                 if (callbackFn) {
 78 |                     callbackFn(fonts[i]);
 79 |                 }
 80 |             } else {
 81 |                 // Hasn't loaded yet; set falsey value
 82 |                 allLoaded = 0;
 83 |             }
 84 |         }
 85 |         
 86 |         if (allLoaded) {
 87 |             clean();
 88 |         } else {
 89 |             // Call again soon
 90 |             setTimeout(testFonts, pollFrequency);
 91 |         }
 92 |     }
 93 |     
 94 |     // Finished
 95 |     function clean() {
 96 |         for (i=0; i<fonts.length; i++) {
 97 |             testEls[i].parentNode.removeChild(testEls[i]);
 98 |         }
 99 |     }
100 |     
101 |     // Run the font loader function as soon as the body exists
102 |     function waitBody() {
103 |         if (doc.body) {
104 |             setupTests();
105 |         } else {
106 |             setTimeout(waitBody, 0);
107 |         }
108 |     }
109 |     waitBody();
110 | }
111 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # TinyWFL - Tiny Web Font Loader
  2 | 
  3 | TinyWFL is a minimal web font loader which uses a similar approach to Google's
  4 | and Typekit's [webfontloader](https://github.com/typekit/webfontloader/) to
  5 | help you avoid the FOIT (flash of invisible text) and FOUT (flash of unstyled
  6 | text), except it does a lot less so it can stay tiny - it is 95% smaller, at
  7 | just 852 bytes.
  8 | 
  9 | TinyWFL will set CSS styles on your ``<html>`` tag when your fonts have loaded,
 10 | and call an optional callback function if you want to know about it in
 11 | JavaScript. It is self-contained and has no dependencies.
 12 | 
 13 | Version 1.0.0
 14 | 
 15 | 
 16 | ## Usage
 17 | 
 18 | 1. Load the script to add the global function TinyWFL, then call it with a list
 19 |    of web font names:
 20 | 
 21 |         <script src="tinywfl-min.js"></script>
 22 |         <script>
 23 |         TinyWFL(['Courgette', 'Open Sans']);
 24 |         </script>
 25 | 
 26 |    The order of the fonts doesn't matter.
 27 |    
 28 |    This code could go anywhere in your page, but TinyWFL will work best if this
 29 |    happens in the ``<head>`` - that way it can immediately disable your web
 30 |    fonts and try to re-enable them while the rest of the page loads, hopefully
 31 |    eliminating FOIT/FOUT altogether.
 32 | 
 33 | 2. Now define your ``@font-face`` in CSS, using the font-face definition as
 34 |    supplied with your web font:
 35 |    
 36 |         @font-face {
 37 |             font-family: 'Courgette';
 38 |             src: url('fonts/courgette.eot');
 39 |             src: url('fonts/courgette.eot?#iefix') format('embedded-opentype'),
 40 |                  url('fonts/courgette.woff') format('woff'),
 41 |                  url('fonts/courgette.ttf') format('truetype');
 42 |         }
 43 | 
 44 |    Alternatively if you are using a hosted font service, add their stylesheet
 45 |    to your HTML:
 46 |    
 47 |         <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 48 | 
 49 | 3. Now set up your CSS to use your fallback fonts when TinyWFL is running but
 50 |    your fonts are not yet available:
 51 |     
 52 |         /* Use your web font by default */
 53 |         body {
 54 |             font-family: "Open Sans", Verdana, sans-serif;
 55 |         }
 56 |         
 57 |         /* Turn it off when TinyWFL is present, but the font isn't available yet */
 58 |         html.tinywfl:not(.tinywfl-opensans) body {
 59 |             font-family: Verdana, sans-serif;
 60 |         }
 61 | 
 62 |    With that arrangement your web fonts can still be used if TinyWFL fails to
 63 |    load (eg if JavaScript isn't available) - albeit with a FOUT.
 64 | 
 65 | 
 66 | ### Callbacks
 67 | 
 68 | You can also take actions when JavaScript loads by passing a callback function:
 69 | 
 70 |     TinyWFL(['Courgette', 'Open Sans'], resizeDoc);
 71 | 
 72 | The callback function will be called each time a font is loaded. If you need to
 73 | know which font was loaded, check the first argument:
 74 | 
 75 |     // Example callback function
 76 |     function resizeDoc(fontName) {
 77 |         resizeHeader();
 78 |         if (fontName === 'Open Sans') {
 79 |             resizeBody();
 80 |         }
 81 |     }
 82 | 
 83 | 
 84 | ## How it works
 85 | 
 86 | TinyWFL doesn't actually do any font loading itself - you still need to add the
 87 | CSS to specify your font family, as you would without TinyWFL. That way your
 88 | web fonts will still work when JavaScript is disabled or fails to load for some
 89 | reason.
 90 | 
 91 | Instead, TinyWFL manages the loading process; it watches to see when the fonts
 92 | have loaded, and sets classes on ``<html>`` to allow your CSS to change based
 93 | on which fonts are available.
 94 | 
 95 | When it starts up, TinyWFL adds the ``twfl`` class to ``<html>``, then as
 96 | each of your fonts is loaded it will add a ``twfl-<safe-fontname>`` class,
 97 | where ``<safe-fontname>`` is a modified version of the font name you supplied -
 98 | it is in lowercase, with any characters other than ``a-z``, ``0-9`` and ``-``
 99 | or ``_`` removed.
100 | 
101 | For example, if your font is called ``Badger #27``, when it has loaded TinyWFL
102 | will add the class ``twfl-badger27`` to ``<html>``.
103 | 
104 | 
105 | For more information about TinyWFL and why it exists, see the blog post
106 | [A Tiny Web Font Loader](http://radiac.net/blog/2015/09/tiny-web-font-loader/).
107 | 
108 | 
109 | ## Contributing
110 | 
111 | Contributions are welcome, preferably via pull request. However, given the
112 | focus of the project is to be as small as possible, bug fixes are preferred
113 | to new features.
114 | 
115 | ### Credits
116 | 
117 | Although originally developed independently, TinyWFL has shamelessly
118 | incorporated parts of webfontloader over the years to become a better WFL -
119 | most notably the test element's CSS and the test string.
120 | 


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