Rails fonts not loading on mobile but showing on desktop

Question

As the title states, I have ionicons and pe font's in assets -> fonts folder.

In my application.rb file

config.assets.paths << Rails.root.join('/app/assets/fonts')

All icons work on desktop, that's pe and ionicons that are in my fonts folder as well as fonts from the gem 'font-awesome-rails'

Website seen through Google Chrome on my desktop

However, on mobile ALL fonts are seen as a blank box which suggest to me a 404 error but I don't understand what difference it would make whether its loaded from desktop or mobile.

Website seen through Google Chrome on my iphone

score 1 · Accepted Answer · answered Mar 07 '19 at 18:59

1

You used wrong way of importing font awesome in your CSS file. It tries to load them from localhost:3000:

Because of that, the icons are visible on your computer (where the rails server is running) and they are not visible on your mobile phone.

answered Mar 07 '19 at 18:59

MrShemek

2,413
1
16
20

Brilliant, thanks for narrowing down the error to the way I am importing the files. – NemyaNation Mar 08 '19 at 13:45
Turns out that I hadn't imported the css and javascript files required in the layout I was using for this particular page. – NemyaNation Mar 23 '19 at 15:41

Rails fonts not loading on mobile but showing on desktop

1 Answers1