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.