index.html

<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width">
        <title>tiny google fonts</title>
        <style>
            html { font-size: 1.5rem }
            .display { font: italic 900 4em/1.1 "Playfair Display"; color: transparent; transition: color 900ms }
            .tiny-google-fonts .display { color: inherit }
        </style>
    </head>
    <body>
        <h1 class="display">Tiny Google Fonts</h1>
        <p>Strip down your Google Fonts significantly by only including the characters you're actually using.</p>
        <p><small>Created by <a href="//twitter.com/chrisnager">Chris Nager</a>. View on <a href="//github.com/chrisnager/tiny-google-fonts">GitHub</a>.</small></p>
        <script src="tiny-google-fonts.js" data-fonts="Playfair+Display:900italic" data-font-class="display"></script>
    </body>
</html>