From d36d7451040a6e53fd3d74584ef332c0295e989c Mon Sep 17 00:00:00 2001
From: Sefa Eyeoglu <contact@scrumplex.net>
Date: Wed, 3 Nov 2021 12:25:26 +0100
Subject: [PATCH] fix: actually load custom fonts

---
 .editorconfig             | 13 +++++++++++++
 src/index.pug             |  2 +-
 src/js/application.js     |  4 ----
 src/scss/_typography.scss | 15 +++++++++++++++
 src/scss/_variables.scss  |  2 +-
 5 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 .editorconfig

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..cf06408
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+
+indent_style = space
+indent_size = 4
+
+[package.json]
+indent_size = 2
+
diff --git a/src/index.pug b/src/index.pug
index 4687874..2c6388c 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -38,7 +38,7 @@ html(lang="en")
                         blockquote.text-right
                             | Converting coffee to code...
                             |
-                            span.text-spinner#text-spinner(hidden="hidden") |
+                            span.text-spinner#text-spinner(hidden) |
                             footer.blockquote-footer
                                 | Scrumplex,
                                 |
diff --git a/src/js/application.js b/src/js/application.js
index 53d1887..44feed8 100644
--- a/src/js/application.js
+++ b/src/js/application.js
@@ -17,10 +17,6 @@
  *
  */
 
-// Load typefaces before actual css to avoid unnecessary redraw
-import "@fontsource/fira-sans";
-import "@fontsource/josefin-sans";
-
 import ready from "./_utils";
 
 const mainElem = document.getElementById("main");
diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss
index e35fbc1..d07afe8 100644
--- a/src/scss/_typography.scss
+++ b/src/scss/_typography.scss
@@ -1,5 +1,20 @@
+@use "@fontsource/fira-sans/scss/mixins" as FiraSans;
+@use "@fontsource/josefin-sans/scss/mixins" as JosefinSans;
+
 @import "variables";
 
+@include FiraSans.fontFace(
+  $weight: 400,
+  $display: fallback,
+  $fontDir: "~node_modules/@fontsource/fira-sans/files"  // TODO: make this cleaner
+);
+
+@include JosefinSans.fontFace(
+  $weight: 400,
+  $display: fallback,
+  $fontDir: "~node_modules/@fontsource/josefin-sans/files"  // TODO: ditto
+);
+
 html {
     font-size: 20px;
 }
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index ec8aa74..a2961eb 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -35,5 +35,5 @@ $responsiveThresholds: (tiny: 576px, smol: 768px, med: 992px, big: 1300px);
 }
 
 @mixin alt-font {
-    font-family: "Josefin Sans", "Fira Sans", "Helvetica Neue", "Arial", sans-serif;
+    font-family: "Josefin SansVariable", "Fira Sans", "Helvetica Neue", "Arial", sans-serif;
 }
-- 
2.34.2