Font Decoder & Downloader

by skibulk

HTML

<div>
    <div>
        <div>
            <p>Hello World</p>
            A Plain Text Node
        </div>
    </div>
</div>

CSS

body {
    font-family: 'open-sans';
}

p:before {
    content:'hello; ("world")';
}

@font-face {
    font-family: 'open-sans';
    src:...

JavaScript

/*
TO DO:
Simply download selected font instead?
http://subsimple.com/bookmarklets/rules.php
Create bookmarklet
http://stackoverflow.com/questions/10472927/add-content-to-a-new-open-window
List fonts in new window with previews, checkboxes, name fields, and download button
List font files and formats (non-embedded)
Include usage rights erification checkbox
https://stuk.github.io/jszip/
Download multiple files as zip
*/

window.onclick = function() {
    //var element = event.target;
    //var typeface = window.getComputedStyle(element, null).getPropertyValue("font-family");
    //return console.log(typeface);
    
    var plainText = '';
    var ss = document.styleSheets;
    for (var i=0; i<ss.length; i++)
    {
        var rules = ss[i].cssRules || ss[i].rules;
        //console.log(rules);
        for (var j=0; j<rules.length; j++)
        {
            var rule = rules[j];
            //console.log(rule);
            plainText += rules[j].cssText + "\r\n";
        }
    }
    //console.log(plainText);
    
    var data;
    var rx = /data:(font\/|application\/x-font-)(woff|opentype|otf|truetype|ttf|eot|svg);.*?base64,([A-Za-z0-9\+\/]+==?)/g;
    //data:font/woff;charset=utf-8;base64,ENCODED==;
    while (data = rx.exec(plainText))
    {
        console.log(data[3]);
        var blob = b64toBlob(data[3]);
        var blobUrl = URL.createObjectURL(blob);
        //window.location = blobUrl;
    }
}

// http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || 'application/octet-stream';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
       ...