Opening of font files in browser

[prady91]

I was unable to open the font files in browser using fontkit. The input format to fontkit is buffer but could not find a way to pass a buffer in browser, could only get an option of passing ArrayBuffer which fontkit does not accept.

[twardoch]

I found a way, shown here:

• https://github.com/twardoch/monoto-fonts-ofl/blob/master/srcdocs/test/fontkit-include.js
• https://github.com/twardoch/monoto-fonts-ofl/blob/master/srcdocs/test/browserifyme.sh
• https://github.com/twardoch/monoto-fonts-ofl/blob/master/srcdocs/test/Monoto-VF-fontkit.html

[twardoch]

<script type="text/javascript" src="fontkit.js"></script>
<script>
function fkOpenFont (fkFontPath) {
  var xhr = new XMLHttpRequest()
  xhr.open('GET', fkFontPath, true)
  xhr.responseType = 'arraybuffer'
  var fkFont = null
  xhr.onload = function (e) {
    if (this.status == 200) {
      var fkBlob = this.response
      var fkBuffer = new Buffer(fkBlob)
      fkFont = fontkit.create(fkBuffer)
    }
  }
  xhr.send();
}

fkOpenFont('../fonts/Monoto-VF.woff')
</script>

[Harbs]

Adam,
Thanks for this! I was just struggling with this myself a few days ago.

[twardoch]

The main point that I had to discover is that node.js has the fs module which uses a Buffer object that fontkit uses. Browserify has a built-in Buffer object that can be used to convert an ArrayBuffer into a fontkit-compatible Buffer. XMLHttpRequest that is built into browsers can return an ArrayBuffer. So it works.

[prady91]

Thanks Adam!

[Pomax]

Worth filing a quick PR that adds this code (or some form of) to the README.md?

[twardoch]

Well do. I still need another week, well have much better sample code then. This is the first time I touched JS since Netscape Navigator :)

[Pomax]

welcome back to JS, it's a brave new world =D

(with so much new functionality it's pretty much a completely different language compared to what we had in '98)

[christiangenco]

@twardoch's solution is even easier with the new fetch API:

const fontUrl = "https://fonts.gstatic.com/s/raviprakash/v3/8EzbM7Rymjk25jWeHxbO6CXeN0lhaNKjYxc8tNqs5DA.woff2";

fetch(fontUrl).then(res => res.arrayBuffer()).then(ab => {
  const font = fontkit.create(new Buffer(ab));
});

[moffsugita]

Does it really support browser not node?
I don't want to use <script type="text/javascript" src="fontkit.js"></script>
I use for React.js. And installed from npm.