Skip to content

Instantly share code, notes, and snippets.

@idevN

idevN/converts-webfont-to-base64.js

Forked from arielsalminen/converts-webfont-to-base64.js
Created June 8, 2017 07:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save idevN/54a6f070b6fc7dccbad5b498ccaf92be to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save idevN/54a6f070b6fc7dccbad5b498ccaf92be to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -49,5 +49,7 @@ document.querySelector("button").addEventListener("click", function() {
    styleElement.innerHTML = fontCode;
    }
    document.head.appendChild(styleElement);

    // Finally set the new font-family to some element
    element.style.fontFamily = "'viljamis', sans-serif";
    }, false);
  2. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -39,7 +39,7 @@ function base64Encode(str) {

    // When menu is clicked, load font file, encode it and inline to the doc <head>
    document.querySelector("button").addEventListener("click", function() {
    var base64EncodedFont = base64Encode(getBinary('http://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYMdQSYiIg2Yb25Hg13-ek1M.woff'));
    var base64EncodedFont = base64Encode(getBinary("http://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYMdQSYiIg2Yb25Hg13-ek1M.woff"));
    var fontCode = "@font-face { font-family: 'viljamis'; src: url('data:application/font-woff;base64," + base64EncodedFont + "') format('woff'); font-style: normal; font-weight: normal }";
    var styleElement = document.createElement("style");
    styleElement.type = "text/css";
  3. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -37,6 +37,7 @@ function base64Encode(str) {
    return out;
    }

    // When menu is clicked, load font file, encode it and inline to the doc <head>
    document.querySelector("button").addEventListener("click", function() {
    var base64EncodedFont = base64Encode(getBinary('http://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYMdQSYiIg2Yb25Hg13-ek1M.woff'));
    var fontCode = "@font-face { font-family: 'viljamis'; src: url('data:application/font-woff;base64," + base64EncodedFont + "') format('woff'); font-style: normal; font-weight: normal }";
  4. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 1 addition and 7 deletions.
    8 changes: 1 addition & 7 deletions converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -37,22 +37,16 @@ function base64Encode(str) {
    return out;
    }

    document.querySelector("button").addEventListener("click", function () {

    document.querySelector("button").addEventListener("click", function() {
    var base64EncodedFont = base64Encode(getBinary('http://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYMdQSYiIg2Yb25Hg13-ek1M.woff'));

    var fontCode = "@font-face { font-family: 'viljamis'; src: url('data:application/font-woff;base64," + base64EncodedFont + "') format('woff'); font-style: normal; font-weight: normal }";

    var styleElement = document.createElement("style");
    styleElement.type = "text/css";

    if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = fontCode;
    } else {
    styleElement.innerHTML = fontCode;
    }

    document.head.appendChild(styleElement);

    element.style.fontFamily = "'viljamis', sans-serif";
    }, false);
  5. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ function getBinary(file) {
    return xhr.responseText;
    }

    // Base64 encode a binary string
    // Base64 encode binary string
    // Stolen from http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de
    function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  6. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,6 +7,7 @@ function getBinary(file) {
    return xhr.responseText;
    }

    // Base64 encode a binary string
    // Stolen from http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de
    function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  7. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    function getBinary(file){
    // Get binary file using XMLHttpRequest
    function getBinary(file) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", file, false);
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
  8. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,7 @@ function getBinary(file){
    return xhr.responseText;
    }

    // Stolen from http://stackoverflow.com/questions/7370943/retrieving-binary-file-content-using-javascript-base64-encode-it-and-reverse-de
    function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;
  9. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 0 additions and 6 deletions.
    6 changes: 0 additions & 6 deletions converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,29 +9,23 @@ function getBinary(file){
    function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;

    while (i < len) {
    c1 = str.charCodeAt(i++) & 0xff;

    if (i == len) {
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt((c1 & 0x3) << 4);
    out += "==";
    break;
    }

    c2 = str.charCodeAt(i++);

    if (i == len) {
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt((c2 & 0xF) << 2);
    out += "=";
    break;
    }

    c3 = str.charCodeAt(i++);

    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
  10. @arielsalminen arielsalminen revised this gist Sep 2, 2014. 1 changed file with 47 additions and 49 deletions.
    96 changes: 47 additions & 49 deletions converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,63 +1,61 @@
    function getBinary(file){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", file, false);
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    xhr.send(null);
    return xhr.responseText;
    }

    function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;

    while (i < len) {
    c1 = str.charCodeAt(i++) & 0xff;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", file, false);
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    xhr.send(null);
    return xhr.responseText;
    }

    if (i == len) {
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt((c1 & 0x3) << 4);
    out += "==";
    break;
    }
    function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;

    c2 = str.charCodeAt(i++);
    while (i < len) {
    c1 = str.charCodeAt(i++) & 0xff;

    if (i == len) {
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt((c2 & 0xF) << 2);
    out += "=";
    break;
    }
    if (i == len) {
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt((c1 & 0x3) << 4);
    out += "==";
    break;
    }

    c3 = str.charCodeAt(i++);
    c2 = str.charCodeAt(i++);

    if (i == len) {
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
    out += CHARS.charAt(c3 & 0x3F);
    out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt((c2 & 0xF) << 2);
    out += "=";
    break;
    }
    return out;
    }

    c3 = str.charCodeAt(i++);

    // Select element from dropdown and update the button text
    document.querySelector("button").addEventListener("click", function () {

    this.style.fontFamily = "'viljamis', sans-serif";
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
    out += CHARS.charAt(c3 & 0x3F);
    }
    return out;
    }

    var base64EncodedFont = base64Encode(getBinary('http://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYMdQSYiIg2Yb25Hg13-ek1M.woff'));
    var fontCode = "@font-face { font-family: 'viljamis'; src: url('data:application/font-woff;base64," + base64EncodedFont + "') format('woff'); font-style: normal; font-weight: normal }";
    document.querySelector("button").addEventListener("click", function () {

    var styleElement = document.createElement("style");
    styleElement.type = "text/css";
    var base64EncodedFont = base64Encode(getBinary('http://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYMdQSYiIg2Yb25Hg13-ek1M.woff'));

    var fontCode = "@font-face { font-family: 'viljamis'; src: url('data:application/font-woff;base64," + base64EncodedFont + "') format('woff'); font-style: normal; font-weight: normal }";

    if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = fontCode;
    } else {
    styleElement.innerHTML = fontCode;
    }
    var styleElement = document.createElement("style");
    styleElement.type = "text/css";

    document.head.appendChild(styleElement);
    }
    }, false);
    if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = fontCode;
    } else {
    styleElement.innerHTML = fontCode;
    }

    document.head.appendChild(styleElement);

    element.style.fontFamily = "'viljamis', sans-serif";
    }, false);
  11. @arielsalminen arielsalminen created this gist Sep 2, 2014.
    63 changes: 63 additions & 0 deletions converts-webfont-to-base64.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    function getBinary(file){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", file, false);
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    xhr.send(null);
    return xhr.responseText;
    }

    function base64Encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;

    while (i < len) {
    c1 = str.charCodeAt(i++) & 0xff;

    if (i == len) {
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt((c1 & 0x3) << 4);
    out += "==";
    break;
    }

    c2 = str.charCodeAt(i++);

    if (i == len) {
    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt((c2 & 0xF) << 2);
    out += "=";
    break;
    }

    c3 = str.charCodeAt(i++);

    out += CHARS.charAt(c1 >> 2);
    out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
    out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
    out += CHARS.charAt(c3 & 0x3F);
    }
    return out;
    }


    // Select element from dropdown and update the button text
    document.querySelector("button").addEventListener("click", function () {

    this.style.fontFamily = "'viljamis', sans-serif";

    var base64EncodedFont = base64Encode(getBinary('http://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYMdQSYiIg2Yb25Hg13-ek1M.woff'));
    var fontCode = "@font-face { font-family: 'viljamis'; src: url('data:application/font-woff;base64," + base64EncodedFont + "') format('woff'); font-style: normal; font-weight: normal }";

    var styleElement = document.createElement("style");
    styleElement.type = "text/css";

    if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = fontCode;
    } else {
    styleElement.innerHTML = fontCode;
    }

    document.head.appendChild(styleElement);
    }
    }, false);