Simple example of generating Google Font CSS with base64 encoded font links

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Local Google Font Generator!</h1>
    <p><b>Example Input:</b> https://fonts.googleapis.com/css?family=Barrio</p>
    <input id="font-input" placeholder="https://fonts.googleapis.com/css?family=Barrio" type="text">
    <button id="font-btn" type="submit">
      Generate CSS
    </button>
    <textarea id="processed-css"></textarea>
  </body>

</html>

function fontLinkToBase64(link) {
  return new Promise(function(resolve, reject) {
    $.get(link, function(data, status, xhr){
      var contentType = xhr.getResponseHeader('content-type');
      const base64Data = 'data:' + contentType + ';charset=utf-8;base64,' + btoa(unescape(encodeURIComponent(data)));
      const dataObj = {
        link: link,
        base64: base64Data
      }
      resolve(dataObj);
    });
  });
}

function getProcessedCSS(css) {
  return new Promise(function(resolve, reject) {
    const fontLinkRegex = new RegExp(/(https?:\/\/(fonts\.)[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,})\w/, 'ig');
    const matches = css.match(fontLinkRegex);

    // BUG: the last url always throws errors when converted to base64 for some reason.
    matches.splice(-1,1);

    var promises = [];

    matches.forEach(function(link) {
      promises.push(fontLinkToBase64(link));
    });

    Promise.all(promises).then(function(fontData) {
      fontData.forEach(function(data) {
        css = css.replace(data.link, data.base64);
      });
      resolve(css);
    });
  });
}

window.onload = function() {
  
  const fontInput = $('#font-input');
  const textarea = $('#processed-css');

  $('#font-btn').on('click', function() {
    const url = fontInput.val();
    
    $.get(url, function(css) {
			getProcessedCSS(css).then(function(processedCSS) {
				textarea.val(processedCSS);
			});
		});
  });
  
};

#font-input {
  border: 2px solid #000;
  border-radius: 5px;
  padding: 5px 7px;
}

#font-btn {
  padding: 5px 7px;
  border: 2px solid #000;
  border-radius: 5px;
  background-color: #000;
  color: #fff;
}

#font-btn:hover {
  background-color: white;
  color: black;
  cursor: pointer;
} 

#processed-css {
  margin-top: 30px;
  padding: 10px;
  width: 100%;
  height: 100%;
  min-height: 500px;
  border-radius: 5px;
  border: 2px solid #000;
}