Load Inter CSS directly (#1444)

Move the load of the Inter font CSS from _variables_project.scss to head-end.html.

Empirically, this seems to fix #965

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
+ * Replace the default font with Inter.
- * Google Fonts manually via a script:
- * https://github.com/matrix-org/matrix-spec/tree/main/static/css/fonts
  *
  * 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. */
+ * and adds "Inter" to the front.
-@import url("../css/fonts/Inter.css");
+ *
+ * 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";

changelogs/internal/newsfragments/1444.clarification

@@ -0,0 +1 @@
+Update references to Inter font.

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. */}}