Load Inter CSS directly (matrix-org#1444)

Move the load of the Inter font CSS from _variables_project.scss to head-end.html. Empirically, this seems to fix matrix-org#965
clokep · May 3, 2023 · 334970b · 334970b
1 parent 9b4c736
commit 334970b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
@@ -41,12 +41,12 @@ $table-row-default: $secondary-lighter-background;
 $td-enable-google-fonts: false;
 
 /*
- * Replace the default font with Inter - we load it from a local copy, which is downloaded from
- * Google Fonts manually via a script:
- * https://github.com/matrix-org/matrix-spec/tree/main/static/css/fonts
+ * Replace the default font with Inter.
  *
  * The $font-family-sans-serif definition here overrides the default value set by docsy:
  * https://github.com/matrix-org/docsy/blob/66a4e61d2d34edc7196b9df83a7d09cd4af14b47/assets/scss/_variables.scss#L68
- * and adds "Inter" to the front. */
-@import url("../css/fonts/Inter.css");
-$font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+ * and adds "Inter" to the front.
+ *
+ * The font itself is loaded via stylesheet link layouts/partials/hooks/head-end.html.
+ */
+$font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
diff --git a/changelogs/internal/newsfragments/1444.clarification b/changelogs/internal/newsfragments/1444.clarification
@@ -0,0 +1 @@
+Update references to Inter font.
diff --git a/layouts/partials/hooks/head-end.html b/layouts/partials/hooks/head-end.html
@@ -6,6 +6,16 @@
 
 */}}
 
+{{/*
+ Load the Inter font.
+
+ We load it from a local copy, which is downloaded from
+ Google Fonts manually via a script:
+ https://github.com/matrix-org/matrix-spec/tree/main/static/css/fonts
+*/}}
+<link rel="preload" href="{{ "/css/fonts/Inter.css" | relURL }}" as="style">
+<link rel="stylesheet" href="{{ "/css/fonts/Inter.css" | relURL }}">
+
 {{ $scss := "scss/custom.scss"}}
 {{ if .Site.IsServer }}
 {{/* Note the missing postCSS. This makes it snappier to develop in Chrome, but makes it look sub-optimal in other browsers. */}}