font-inject.js

Examples

  • Blackout 2am

  • Cookie

  • Butcherman

Basic Usage

    <script src="/path/to/font-inject.js"></script>
    <script>
        var fontDirPath = '/path/to/fonts/';
        var fi = new FontInject(fontDirPath);

        var fontList = [
          new Font('Blackout 2am', 'Blackout-2am.ttf', 400),
          new Font('Butcherman', 'Butcherman-Regular.ttf', 400),
          new Font('Cookie', 'Cookie-Regular.ttf', 400),
          new Font('Salsa', 'Salsa-Regular.ttf', 400)
        ];

        fi.injectAll(fontList);
    </script>

Lazy Loading

FontInject allows you to inject as many fonts as your users may need and only the fonts they need.

Open up the console, go to the network tab and sort requests to "Font", then click here to reveal another example and you'll see the request is only made when its necessary.