search

chinshr / lato-rails

I like the Lato font. I like the asset pipeline. If you do too, you're welcome.
MIT License
4 stars 3 forks source link

Font not found in Production with Asset Compilation #3

Open daveharris opened 7 years ago

daveharris commented 7 years ago

First off, thanks for creating this gem.

I am using Semantic-UI-Rails-LESS which defaults to using the Lato font. I am wanting to do development away from the internet so found this project to provide it through the asset pipeline.

I am using version 1.0.5 of lato-rails and have followed the README instructions for how to include it via Sprockets i.e. *= require lato.

It works fine in development, i.e. the font are being served correctly from http://localhost:3000/assets/bold/lato-bold.woff2?v=1.0.0

However, when deploying to production (with asset compilation enabled) the font files cannot be found. The CSS tries to load the font files from https://popin-portraits.herokuapp.com/assets/regular/lato-regular.woff2?v=1.0.0 which doesn't exist. I assume that's because the fingerprint is missing. For example, normal images are served through the asset pipeline have URLs like https://popin-portraits.herokuapp.com/assets/logo-afe2c346aabb349f7b0860664d363b7f1c6477d84ea59d48afbd626365260a85.png.

While the code is private, you can access the login page at https://popin-portraits.herokuapp.com/ and see from the Web Inspector that the fonts are not being loaded.

I don't think it's anything to do with Semantic-UI-Rails-LESS, as the CSS generated by lato-rails seems to be incorrect. See line 1 of the generated CSS. However, I could be wrong.

I have had some experience with defining font-face and I ran into an issue where my .scss needed to use font-url() instead of url() to fix this exact issue. The URL where my custom font is loaded is http://cycling.harris.org.nz/assets/strava-8c03e79c77a5f9d8d09f6b37a8bbc83fb83510ce6135d8962c522db44a758849.ttf?. However, I see that you already use font-url().

Do you have any ideas? I'm now somewhat out of my depth! Again, sorry I can't share the code :(

chinshr commented 7 years ago

Thanks for sharing all the details. Which rails version do you use? Can you share your environments/production.rb?

One obvious one comes to mind for Heroku:

# Needs to be false on Heroku
config.assets.initialize_on_precompile = false

Regarding the assets hash as part of the font file name; my guess sprockets is confused because of adding the version parameter. I will test it a little further and prepare a branch, or if you found the fix, please feel free to provide a PR.

daveharris commented 7 years ago

Thanks for getting back to me. I am using rails 5.1.3 and I created a gist for environments/production.rb. I haven't modified environments/production.rb from the default version.

I didn't know about the config.assets.initialize_on_precompile setting. I'll take a look into that. Seems weird that other assets are compiled on Heroku though. I notice that config.assets.compile = false but that is correct as I want them pre-compiled. I had a look in config/initializers/assets.rbbut there was nothing useful in there.

Maybe you are right about the version parameter, from memory I haven't seen Font Awesome URLs with query string params.

daveharris commented 7 years ago

@chinshr Did you get anywhere with the fix for this? It's causing huge slowdowns with a large number of 404s generated which are then sent to Rollbar exception handling (an issue in itself but still...)