How do I serve a .ttf file in node.js using the http and fs libraries?

Question

I have a simple node server and I have a CSS file that requests a font from my server:

@font-face{
     font-family: 'NiagaraSolid-Reg';
     src: url('http://localhost:1111/NIAGSOL.TTF');
}

This is what I attempted to do. It normally works with .html, .css, and .js files:

http.createServer(function(request,response){
    var arguments=request.url.slice(1).split("/");
    switch(arguments[0]){
        case "NIAGSOL.TTF":
            response.end(fs.readFileSync("website/NIAGSOL.TTF").toString());
            break;
        //etc 
})

But when I do this, in Chrome I get the error message: Failed to decode downloaded font: http://localhost:1111/NIAGSOL.TTF

In searching for an answer, everything I came across was too complicated for me to understand becuase it required prerequisite knowledge of a lot of things. I'm completely illiterate when it comes to buffers and streams and binaries and encodings etc. I need a simple "explain-like-I'm-five" answer for how to serve a .tff file.

Thanks!

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

How to serve an image using nodejs

This link helped me figure out what to do. On a whim I decided to try response.end(fs.readFileSync("website/NIAGSOL.TTF"),"binary"); and it worked. Not sure why exactly but hey!

edited May 23 '17 at 12:00

Community

1
1

answered Feb 16 '16 at 18:29

Nick Manning

2,828
1
29
50

1

The reason is that with toString you get encoding and other things, so the binary file it's sending is different from the original. – bolav Feb 16 '16 at 19:38
Thanks. Good to know! – Nick Manning Feb 16 '16 at 20:28

score 0 · Answer 2 · answered Feb 20 '17 at 09:49

If you're coding a raw http server in node, you must set the "Content-Type" header in the response. So if you're serving an html file you set the header content type to "text/html". Likewise you must tell node to serve .ttf files as such, by setting the header on the response thats serving the ttf file. You can do so by setting the content type to "application/x-font-ttf".

http.createServer(function (req, res) { res.writeHead(400, { "Content-Type": "application/x-font-ttf" }); }); You'll need to write you're own code for handling the different file types you're server may be serving. Just remember that if its a .ttf, set the header as above.

How do I serve a .ttf file in node.js using the http and fs libraries?

2 Answers2