Why Node.js failed to serve .woff files

Question

I downloaded the .woff file from Google web fonts for some network reason in China. Previously I tried @font-face that on Github Pages and it works. But this time it took me an hour to find where was broken.

I use Node to serve static files with mime, and the content-type appears to be application/x-font-woff, and my code in CoffeeScript:

exports.read = (url, res) ->
  filepath = path.join __dirname, '../', url
  if fs.existsSync filepath
    file_content = fs.readFileSync filepath, 'utf8'
    show (mime.lookup url)
    res.writeHead 200, 'content-type': (mime.lookup url)
    res.end file_content
  else
    res.writeHead 404
    res.end()

As the content-type of .woff on Github Pages is application/octet-stream, I just commnet out that line in my code to make it the same.. But it still failed:

exports.read = (url, res) ->
  filepath = path.join __dirname, '../', url
  if fs.existsSync filepath
    file_content = fs.readFileSync filepath, 'utf8'
    show (mime.lookup url)
    # res.writeHead 200, 'content-type': (mime.lookup url)
    res.end file_content
  else
    res.writeHead 404
    res.end()

At last, I switched to a Nginx server to serve the .woff file.. and finally it began to work.

But how Can I fix that on Node?

Answer 1

In this line, fs.readFileSync(filepath, 'utf8') the encoding is set to 'utf8'. It needs to be 'binary'.

Also, the res.end(file_content) function needs to pass the right encoding. Try res.end(file_content, 'binary').

I had the same issue and had to figure it out myself, this answer doesn't seem to exist anywhere online.