Can the ouput of a HTML5 FileReader.readAsDataURL be used to reference fonts?

Question

I have a HTML5 image editor that I'd like to enable custom fonts uploaded by the user.

I'd like to use the HTML5 FileReader.readAsDataURL to store the font provided by the user in the database. After storing it in the db I'd like to be able to then reference those fonts on the page so they can be used.

So if I take the output of the file reader I get 'data:application/octet-stream;base64,AAEAAAANA....". Can I then take that data and reference it on the page to enable the font?

Answer 1

Short answer: yes.

Longer answer: yes, but you want to re-serve it with the real mime type, not "octet stream" mime type. It'll probably still work, but the browser will complain that the resource had the wrong mime type, and if the site you serve it on uses CSP (which I hope you're using?) then this might actually prevent the font from loading. You'll want a font/opentype or application/font-woff or the like instead (depending on what the user uploads, trivially checked by looking at the first few bytes of the file).