Getting Katex fonts to load with Rails Asset Pipeline

Question

I'm integrating the Katex math formula rendering library into a Rails 3.2 app but the font assets keep returning a 404 error message:

Started GET "/assets/fonts/KaTeX_Math-Italic.woff"
Served asset /fonts/KaTeX_Math-Italic.woff - 404 Not Found (3ms)

ActionController::RoutingError (No route matches [GET] "/assets/fonts/KaTeX_Math-Italic.woff"):

I placed all of the fonts in the vendor/assets/fonts directory.

Without manipulating the third party JS or CSS files, how do I go about solving this?

Answer 1

It turns out that all of the assets are compiled into the public/assets directory instead of being separated like public/assets/fonts, which is what Katex is expecting.

However, subdirectories of these "main" directories are retained so I moved the Katex fonts to the following directory instead:

vendor/assets/fonts/fonts/

Now the public/assets directory contains a fonts directory and the path /assets/fonts/KaTeX_Math-Italic.woff gets served just fine.

I don't like having a fonts/fonts directory so let me know if there's a more elegant way to solve this that doesn't involve manipulating the third party JS or CSS assets.

Answer 2

I've made the katex gem works with Rails. It also provides server-side rendering (via ExecJS).

Answer 3

Thanks guys. /fonts/fonts works for me but still have another problem when I refresh page, the fonts suddenly disappear and appear again.

I found a solution, why not put fonts/*.ttf into app/assets/images/fonts/*.ttf for dev env?

At the same time keep config/environments/development.rb still the default config.serve_static_assets = false false value.

This works for me.