0

I am trying to load a font file from a local file and turn it into a uri.

Unfortunately, I am having some issues properly reading the file

Here is the function I am constructing:

 function fontToDataURI (file_path) {
    
    return fetch(file_path) 
      .then(resp => resp.blob()) 
      .then(blob => {
        console.log(blob.type)
        return new Promise(resolve => {

          let f = new FileReader();
          f.onload = e => resolve(f.result);
          f.readAsDataURL(blob);

        })
      })
      .then(dataURL => {
    
         let fontRule = `@font-face {
           font-family: "testfont face";
           src: url(${dataURL});
     
        }`

        return fontRule;
      })

Unfortunately, resp.blob() is not able to properly read the mimetype of the file.

When I pass a font file into the function i.e. georgia.tff, I believe I should see a blob type of font/ttf. Instead, I see the default application/octet-stream

I have used a similar function to pull a .woff2 file from the web and it has recognized the file properly.

Is there a way for me to fix this issue? Thank you!

abrezey
  • 135
  • 9
  • Possible duplicate of [Create font from blob](https://stackoverflow.com/questions/34922932/javascript-create-font-from-blob-data) – Carlos1232 Aug 28 '20 at 20:29
  • Thank you for your comment, @Carlos1232. I think I've already worked through that question's issue. In my question, I already have the code to add the encoded font to an @font-face. I am struggling with getting the blob to have the right mime type. Is it appropriate to just manually change it--i.e. editing the string to replace `application/octet-stream` with `font/ttf`? – abrezey Aug 28 '20 at 20:38
  • now that I remember if you get application/octet-stream is because you're gettings an array of bits. So you probably have to convert it first then use the blob, [ConvertArrayofbits to blob](https://stackoverflow.com/questions/15341912/how-to-go-from-blob-to-arraybuffer) – Carlos1232 Aug 28 '20 at 20:42

0 Answers0