Fixing download issues that come from Font.download() and issues with the output OTF files.

[basisvectors]

Issue

Here:

https://github.com/kevinzweerink/ntype/blob/4c26df34fc4f80f6314f856c3b7fc17b3895458b/js/export.js#L65 opentype.min.js raises:

Not allowed to navigate top frame to filesystem URL: filesystem: opentype.min.js:14

Which comes from:

Font.prototype.download = function () {
        var t = this.familyName.replace(/\s/g, "") + "-" + this.styleName + ".otf",
            e = this.toBuffer();
            
        //here
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem, window.requestFileSystem(window.TEMPORARY, e.byteLength, function (n) {
            n.root.getFile(t, {
                create: !0
            }, function (t) {
                t.createWriter(function (n) {
                    var i = new DataView(e),
                        o = new Blob([i], {
                            type: "font/opentype"
                        });
                    n.write(o), n.addEventListener("writeend", function () {
                        location.href = t.toURL()
                    }, !1)
                })
            })
        }, function (t) {
            throw t
        })
    }

This is due to a google chrome update that came in 2017:

Intent to Deprecate and Remove: Top-frame navigations to data URLs

Suggestions

Instead of using Font.prototype.download, i suggest just directly downloading the blob:

Replace https://github.com/kevinzweerink/ntype/blob/4c26df34fc4f80f6314f856c3b7fc17b3895458b/js/export.js#L65

With:

    var filename = Font.familyName.replace(/\s/g, "") + "-" + Font.styleName + ".otf";
    var blob = new Blob([[new DataView(Font.toBuffer())]], { type: "font/opentype" });
    
    // standard blob download code
    var url = window.URL.createObjectURL(blob);
    var link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();

This worked and it gave me the otf files to download.

There were a few issues with the otf file:

The glyphs work:

Its just that they're extremely tiny by default. The glyphs above are at 360pt

Also, it'd be convenient if there was a way to duplicate these glyphs for lowercase characters as well, it'd make it much more easier to work with them.