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?
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.