Replace Lato font with Lexend

app/javascript/styles/_variables.scss

@@ -1,14 +1,9 @@
 // Font settings
-$lato-font-path: "~lato-font/fonts";
+$lexend-font-path: "~@fontsource/lexend/files";
-$lato-variants: (
+$lexend-weights:   400, 500, 600;
-  "normal"   : 400,
+$fa-font-path:     "~font-awesome/fonts";
-  "semibold" : 500,
-  "bold"     : 600,
-);
 
-$fa-font-path: "~font-awesome/fonts";
+$font-family-sans-serif:  "Lexend", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-$font-family-sans-serif:  "Lato","Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-serif:       Georgia, "DejaVu Serif", "Times New Roman", Times, serif;
 $font-family-monospace:   "PragmataPro", Monaco, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
 $font-family-base:        $font-family-sans-serif;
@@ -41,7 +36,7 @@ $nprogress-color: lighten($primary, 25%);
 
 // Color names for theme generation
 $color-names: (
-  "primary", 
+  "primary",
   "danger",
   "warning",
   "info",
@@ -83,7 +78,7 @@ $spacers: (
    color: RGB(var(--*-text));
 
    And for transparent usage, use:
-   color: rgba(var(--*-text), .7); 
+   color: rgba(var(--*-text), .7);
 
    The uppercase RGB is required because internally
    SassC wants more than one argument for rgb(),

app/javascript/styles/application.scss

@@ -4,6 +4,7 @@
  Variable definitions, tools and mixins used
  across all styling definitions.
  */
+@use "~@fontsource/lexend/scss/mixins" as Lexend;
 
 @import
 "variables";
@@ -19,10 +20,18 @@
 "~bootstrap/scss/bootstrap",
 "~croppr/dist/croppr",
 "~font-awesome/scss/font-awesome",
-"~lato-font/scss/lato-font",
 "~sweetalert/dist/sweetalert",
 "~toastify-js/src/toastify";
 
+
+@each $weight in $lexend-weights {
+  @include Lexend.fontFace(
+    $weight: $weight,
+    $display: fallback,
+    $fontDir: "~@fontsource/lexend/files"
+  );
+}
+
 /**
  OVERRIDES
  ----------------------------------------------

package.json

@@ -5,6 +5,7 @@
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.18.6",
+    "@fontsource/lexend": "^4.5.13",
     "@hotwired/turbo-rails": "^7.1.3",
     "@melloware/coloris": "^0.16.1",
     "@rails/request.js": "^0.0.6",
@@ -16,7 +17,6 @@
     "i18n-js": "^4.0",
     "jquery": "^3.6.1",
     "js-cookie": "2.2.1",
-    "lato-font": "^3.0.0",
     "popper.js": "^1.16.1",
     "rails_admin": "3.0.0",
     "regenerator-runtime": "^0.13.10",

yarn.lock

@@ -1093,6 +1093,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/lexend@^4.5.13":
+  version "4.5.13"
+  resolved "https://registry.yarnpkg.com/@fontsource/lexend/-/lexend-4.5.13.tgz#a22076e1393af0f075e945fcffc9ffa514805304"
+  integrity sha512-lJjBMU9Jmi2a/QqLRBhwe862385UyS2RckS3ATr8jHAq1JFLxox2p2gODNzhaWo0ZwTjDxIJ0YfMiEzSdyqZ0w==
+
 "@fortawesome/fontawesome-free@^5.15.4":
   version "5.15.4"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5"
@@ -4748,11 +4753,6 @@ last-call-webpack-plugin@^3.0.0:
     lodash "^4.17.5"
     webpack-sources "^1.1.0"
 
-lato-font@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lato-font/-/lato-font-3.0.0.tgz#91b837e2374b668fb7331d44c894d37a2d9f8e11"
-  integrity sha1-kbg34jdLZo+3Mx1EyJTTei2fjhE=
-
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"