Serve fonts using css-helper instead of javascript

README.md

@@ -58,12 +58,12 @@ Role.create(role_type: :main_bartender, group_uid: 6)
 ## Testing & Linting
 
 To Run the test locally the following command can be used 
-```
+```bash
 bundle exec rspec
 ```
 
 To run the linting locally you can use the following commands 
-```
+```bash
 yarn lint
 yarn run sass-lint -v -q
 bundle exec rubocop
@@ -72,7 +72,17 @@ bundle exec rubocop
 
 When migrations are executed on master and everthing worked they can be archived with the following command.
 
-    bundle exec rails db:migrate:archive
+```bash
+bundle exec rails db:migrate:archive
+```
+
+## Updating Fonts
+
+When fonts need to be updated, they can be copied from the node_modules folder to assets/fonts with the following command.
+
+```bash
+yarn update:font
+```
 
 ## Deploying
 

app/assets/stylesheets/application.scss

@@ -1,3 +1,9 @@
+$fa-font-path: "/webfonts";
+
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/regular";
+@import "@fortawesome/fontawesome-free/scss/brands";
 @import 'bootstrap/scss/bootstrap';
 @import 'theme_sofia';
 @import 'order_screen';
@@ -75,6 +81,10 @@ a {
   }
 }
 
+.btn-login {
+  width: 100%
+}
+
 .footer {
   position: absolute;
   bottom: 0;

app/javascript/application.js

@@ -5,7 +5,6 @@ import 'jquery';
 import 'bootstrap';
 
 import WebFont from 'webfontloader';
-import '@fortawesome/fontawesome-free/css/all.css';
 
 WebFont.load({
   google: {

app/views/partials/_login_prompt.html.erb

@@ -10,7 +10,7 @@
         Log in with a <%= Rails.application.config.x.site_association %> account.
       </p>
       <div class="d-grid">
-        <%= link_to "Sign in with #{Rails.application.config.x.site_association}", user_amber_oauth2_omniauth_authorize_path, class: 'btn btn-primary', data: { turbo_method: :post } %>
+        <%= button_to "Sign in with #{Rails.application.config.x.site_association}", user_amber_oauth2_omniauth_authorize_path, class: 'btn btn-primary btn-login', data: { turbo: "false" } %>
       </div>
     </div>
   </div>

bin/copy_fontawesome_fonts

@@ -0,0 +1,24 @@
+#!/usr/bin/env ruby
+# Copies FontAwesome font files from node_modules to public/webfonts
+
+require 'fileutils'
+
+# Source and destination directories
+source = File.expand_path('../node_modules/@fortawesome/fontawesome-free/webfonts', __dir__)
+dest   = File.expand_path('../public/webfonts', __dir__)
+
+unless Dir.exist?(source)
+  abort "Source directory not found: #{source}\nDid you run 'yarn install' or 'npm install'?"
+end
+
+FileUtils.mkdir_p(dest)
+
+# Copy all font files
+font_exts = %w[.woff2 .woff .ttf .eot]
+Dir.entries(source).each do |file|
+  next unless font_exts.include?(File.extname(file))
+  FileUtils.cp(File.join(source, file), File.join(dest, file))
+  puts "Copied #{file}"
+end
+
+puts "All FontAwesome fonts copied to #{dest}"

package.json

@@ -7,7 +7,8 @@
     "lint:styles:fix": "stylelint 'app/**/*.s+(a|c)ss' 'app/**/*.vue' --ignore-path .gitignore --fix",
     "build": "webpack --config webpack.config.js",
     "watch": "webpack --config webpack.config.js --watch",
-    "build:css": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
+    "build:css": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
+    "update:font": "ruby bin/copy_fontawesome_fonts"
   },
   "dependencies": {
     "@babel/core": "^7.28.5",