Fonts not loading with dart sass in Rails 7

[michaelrevans]

I have a Rails project that uses dartsass for SASS to CSS compilation.

Having followed through the installation instructions, the fonts are missing and it's giving a simple routing error in the rails server logs:

ActionController::RoutingError (No route matches [GET] "/webfonts/fa-solid-900.ttf"):

and the same for the woff2 file.

Unsurprisingly, when trying to use the fonts in a view (using ERB), it's not showing any content and the browser console displays the a similar 404 error:

GET http://localhost:3000/webfonts/fa-brands-400.ttf net::ERR_ABORTED 404 (Not Found)

[Ozkee]

Did you find the solution?
Here it is, in your application.scss:
@use 'font-awesome' with ($fa-font-path: 'font-awesome');

[joshuacronemeyer]

@Ozkee thanks for this. nothing worked until i found this issue and your comment.

[joshuacronemeyer]

Actually @Ozkee's suggestion got the icons working for me, for example when i do

<%= icon('fa-brands', 'font-awesome')%>

everything works, but I too am seeing some 404s in the console. Not causing me issues but wondering if i'm still missing something.

Started GET "/webfonts/fa-solid-900.woff2" for ::1 at 2023-12-29 09:40:41 -0600

ActionController::RoutingError (No route matches [GET] "/webfonts/fa-solid-900.woff2"):

Started GET "/webfonts/fa-solid-900.ttf" for ::1 at 2023-12-29 09:40:41 -0600

ActionController::RoutingError (No route matches [GET] "/webfonts/fa-solid-900.ttf"):

Started GET "/webfonts/fa-regular-400.woff2" for ::1 at 2023-12-29 09:40:41 -0600

ActionController::RoutingError (No route matches [GET] "/webfonts/fa-regular-400.woff2"):

Started GET "/webfonts/fa-regular-400.ttf" for ::1 at 2023-12-29 09:40:41 -0600

ActionController::RoutingError (No route matches [GET] "/webfonts/fa-regular-400.ttf"):

i checked and using an fa-regular icon is working.

[fschiefelbein]

@joshuacronemeyer, I have changed _variables.scss from
$fa-font-path : "../webfonts" !default;
to
$fa-font-path : "assets/font-awesome/webfonts" !default;

and fixed all routing errors. Just check your path matches.
With this change you don't need to add the @use statement to your application.scss

[joshuacronemeyer]

ok interesting @fschiefelbein so are you rebuilding a gem from your own fork or are you overriding this somehow in your app. I see the file and line you've changed, just wondering what's the best way to incorporate it. I wonder if you made a PR for this if they would merge it

[fschiefelbein]

I came across this issue without using the gem, I am just using dartsass-rails and hosting fontawesome files. I changed my _varialble.scss file in my app. I didn't make a PR for this.

[dima4p]

This patch should help

[YuriDSS]

Did you find the solution? Here it is, in your application.scss: @use 'font-awesome' with ($fa-font-path: 'font-awesome');

Thanks @Ozkee , the icons only started working after i added the configuration exactly as you indicated. Thanks you so much!

[joshuacronemeyer]

@dima4p when i tried that patch it didn't do anything for me

what i tried was changing my Gemfile like this

-gem "font-awesome-sass", "~> 6.5"
+gem "font-awesome-sass", github: 'dima4p/font-awesome-sass', ref: 'bed06b0e9c62ec7e9523879d2012d43ec14afa75'

and then rebuilding my sass. I was still seeing the 404s. To clarify the icons are working for me, but wanted to get rid of the 404s

[dima4p]

@dima4p when i tried that patch it didn't do anything for me

what i tried was changing my Gemfile like this

-gem "font-awesome-sass", "~> 6.5"
+gem "font-awesome-sass", github: 'dima4p/font-awesome-sass', ref: 'bed06b0e9c62ec7e9523879d2012d43ec14afa75'

and then rebuilding my sass. I was still seeing the 404s. To clarify the icons are working for me, but wanted to get rid of the 404s

What version of Rails did you use? I used 7.2.
Additionally it is not clear, what is the point in the code, that results in 404.