perf: load self-hosted fonts async

yixiuer · Nov 1, 2024 · a845733 · a845733
1 parent c8f0355
commit a845733
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 40 deletions.
diff --git a/assets/scss/custom/_custom.scss b/assets/scss/custom/_custom.scss
@@ -1,41 +1,3 @@
-// https://github.com/ichitenfont/I.Ming
-@font-face {
-    font-family: 'I.MingCP';
-    font-display: swap;
-    src: url('https://cdn.jsdelivr.net/gh/yixiuer/yixiuer.me/static/fonts/I.MingCP-8.10.woff2') format('woff2');
-    font-weight: 400;
-    font-style: normal;
-}
-
-// https://github.com/lxgw/LxgwWenkaiTC
-@font-face {
-    font-family: 'LXGW WenKai TC';
-    font-display: swap;
-    src: url('https://cdn.jsdelivr.net/gh/yixiuer/yixiuer.me/static/fonts/LXGWWenKaiTC-Light-v1.501.woff2') format('woff2');
-    font-weight: 300;
-    font-style: normal;
-}
-
-// https://github.com/TypeNetwork/Amstelvar
-@font-face {
-    font-family: 'Amstelvar';
-    font-display: swap;
-    src: url('#{$baseRelURL}/fonts/Amstelvar-Roman-VF.woff2') format('woff2-variations'),
-         url('#{$baseRelURL}/fonts/Amstelvar-Roman-VF.woff2') format('woff2');
-    font-weight: 100 900;
-    font-stretch: 50% 125%;
-    font-style: normal;
-}
-@font-face {
-    font-family: 'Amstelvar';
-    font-display: swap;
-    src: url('#{$baseRelURL}/fonts/Amstelvar-Italic-VF.woff2') format('woff2-variations'),
-         url('#{$baseRelURL}/fonts/Amstelvar-Italic-VF.woff2') format("woff2");
-    font-weight: 100 900;
-    font-stretch: 50% 125%;
-    font-style: italic;
-}
-
 .home {
     font-family: 'Noto Serif TC', serif;
     .avatar {

diff --git a/assets/scss/custom/fonts.scss b/assets/scss/custom/fonts.scss
@@ -0,0 +1,37 @@
+// https://github.com/ichitenfont/I.Ming
+@font-face {
+  font-family: 'I.MingCP';
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/gh/yixiuer/yixiuer.me/static/fonts/I.MingCP-8.10.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+// https://github.com/lxgw/LxgwWenkaiTC
+@font-face {
+  font-family: 'LXGW WenKai TC';
+  font-display: swap;
+  src: url('https://cdn.jsdelivr.net/gh/yixiuer/yixiuer.me/static/fonts/LXGWWenKaiTC-Light-v1.501.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+// https://github.com/TypeNetwork/Amstelvar
+@font-face {
+  font-family: 'Amstelvar';
+  font-display: swap;
+  src: url('/fonts/Amstelvar-Roman-VF.woff2') format('woff2-variations'),
+       url('/fonts/Amstelvar-Roman-VF.woff2') format('woff2');
+  font-weight: 100 900;
+  font-stretch: 50% 125%;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Amstelvar';
+  font-display: swap;
+  src: url('/fonts/Amstelvar-Italic-VF.woff2') format('woff2-variations'),
+       url('/fonts/Amstelvar-Italic-VF.woff2') format("woff2");
+  font-weight: 100 900;
+  font-stretch: 50% 125%;
+  font-style: italic;
+}
diff --git a/layouts/partials/custom/head.html b/layouts/partials/custom/head.html
@@ -1,5 +1,14 @@
-<!-- This file fixes an unknown weird bug with 🄯 -->
+{{/*  Fix an unknown weird bug with 🄯  */}}
 {{ $link := "https://fonts.googleapis.com/css2?family=Noto+Serif+SC&text=🄯&display=swap" }}
 
 <link rel="stylesheet" href="{{ $link }}" media="print" onload="this.media='all'" />
-<noscript><link rel="stylesheet" href="{{ $link }}" /></noscript>
+<noscript><link rel="stylesheet" href="{{ $link }}" /></noscript>
+
+{{/*  Load self-hosted fonts async  */}}
+{{- $path := (strings.TrimPrefix "/" (printf `%s/css/fonts.min.css` .Site.LanguagePrefix)) -}}
+{{- $options := (dict "targetPath" $path "outputStyle" "compressed") -}}
+
+{{- $style := resources.Get "scss/custom/fonts.scss" | resources.ExecuteAsTemplate (printf "%s/styles/fonts-rendered.scss" .Lang) . | toCSS $options -}}
+<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+<link rel="stylesheet" href="{{ $style.RelPermalink }}" media="print" onload="this.media='all'" />
+<noscript><link rel="stylesheet" href="{{ $style.RelPermalink }}" /></noscript>