Fonts with “.var” in the filename cause Apache 500 errors

This site uses the variable version of the beautiful Inter font by Rasmus Andersson (at the time this article was published). I opted to self host the font so I downloaded the source files from Inter’s GitHub repo, and added the variable font file named Inter.var.woff2 to the WordPress theme.

I immediately noticed a 500 error in my browser console.

GET https://itsamoreh.dev/wp-content/themes/itsamoreh.dev/assets/fonts/Inter.var.woff2 net::ERR_ABORTED 500 (Internal Server Error)

Then I checked the server’s error logs where I saw the following error.

... [negotiation:error] ... Syntax error in type map, no ':' in /var/www/html/wp-content/themes/itsamoreh.dev/assets/fonts/Inter.var.woff2 for header wof2, referer: https://itsamoreh.dev/

I did some searching and found this issue on Inter’s GitHub repository that explains the bug is in Apache, not the font file or WordPress. Apache is seeing .var in the filename and thinking that this is another type of file even though the font’s extension is .woff2.

Until this is fixed in Apache, a workaround is to simply rename the font file to Inter.variable.woff2 or Inter-var.woff2.