Improved font loading method for better performance

TryGhost · Jun 17, 2024 · e860b01 · e860b01
1 parent 9a2f77a
commit e860b01
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 46 deletions.
diff --git a/assets/built/screen.css b/assets/built/screen.css
diff --git a/assets/built/screen.css.map b/assets/built/screen.css.map
diff --git a/assets/css/screen.css b/assets/css/screen.css
@@ -83,50 +83,7 @@ production stylesheet in assets/built/screen.css
 /* 2. Fonts
 /* ---------------------------------------------------------- */
 
-@font-face {
-    font-family: "Inter";
-    font-style: normal;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url(../fonts/inter-roman.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-    font-family: "EB Garamond";
-    font-style: normal;
-    font-weight: 400 800;
-    font-display: swap;
-    src: url(../fonts/eb-garamond-roman.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-    font-family: "EB Garamond";
-    font-style: italic;
-    font-weight: 400 800;
-    font-display: swap;
-    src: url(../fonts/eb-garamond-italic.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-    font-family: "JetBrains Mono";
-    font-style: normal;
-    font-weight: 100 800;
-    font-display: swap;
-    src: url(../fonts/jetbrains-mono-roman.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-    font-family: "JetBrains Mono";
-    font-style: italic;
-    font-weight: 100 800;
-    font-display: swap;
-    src: url(../fonts/jetbrains-mono-italic.woff2) format("woff2");
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
+/* Fonts are preloaded and defined in default.hbs to avoid layout shift */
 
 /* 3. Resets
 /* ---------------------------------------------------------- */

diff --git a/default.hbs b/default.hbs
@@ -10,6 +10,9 @@
     {{!-- Preload main styles and scripts for better performance --}}
     <link rel="preload" as="style" href="{{asset "built/screen.css"}}">
     <link rel="preload" as="script" href="{{asset "built/source.js"}}">
+
+    {{!-- Fonts are preloaded and defined in the default template to avoid layout shift --}}
+    {{> "typography/fonts"}}
 
     {{!-- Theme assets - use the {{asset}} helper to reference styles & scripts, this will take care of caching and cache-busting automatically --}}
     <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}">

diff --git a/partials/typography/fonts.hbs b/partials/typography/fonts.hbs
@@ -0,0 +1,15 @@
+{{!-- Sans-serif font is always loaded, because it's the default font for some part of the theme regardless of the settings --}}
+{{> "fonts/sans"}}
+
+{{#match @custom.title_font "Modern sans-serif"}}
+    {{#match @custom.body_font "Elegant serif"}}
+        {{> "fonts/serif"}}
+    {{/match}}
+{{else match @custom.title_font "Elegant serif"}}
+    {{> "fonts/serif"}}
+{{else}}
+    {{> "fonts/mono"}}
+    {{#match @custom.body_font "Elegant serif"}}
+        {{> "fonts/serif"}}
+    {{/match}}
+{{/match}}
diff --git a/partials/typography/mono.hbs b/partials/typography/mono.hbs
@@ -0,0 +1,21 @@
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/jetbrains-mono-roman.woff2"}}" crossorigin="anonymous">
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/jetbrains-mono-italic.woff2"}}" crossorigin="anonymous">
+<style>
+    @font-face {
+        font-family: "JetBrains Mono";
+        font-style: normal;
+        font-weight: 100 800;
+        font-display: optional;
+        src: url({{asset "fonts/jetbrains-mono-roman.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+
+    @font-face {
+        font-family: "JetBrains Mono";
+        font-style: italic;
+        font-weight: 100 800;
+        font-display: optional;
+        src: url({{asset "fonts/jetbrains-mono-italic.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+</style>
diff --git a/partials/typography/sans.hbs b/partials/typography/sans.hbs
@@ -0,0 +1,11 @@
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/inter-roman.woff2"}}" crossorigin="anonymous">
+<style>
+    @font-face {
+        font-family: "Inter";
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: optional;
+        src: url({{asset "fonts/inter-roman.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+</style>
diff --git a/partials/typography/serif.hbs b/partials/typography/serif.hbs
@@ -0,0 +1,21 @@
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/eb-garamond-roman.woff2"}}" crossorigin="anonymous">
+<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/eb-garamond-italic.woff2"}}" crossorigin="anonymous">
+<style>
+    @font-face {
+        font-family: "EB Garamond";
+        font-style: normal;
+        font-weight: 400 800;
+        font-display: optional;
+        src: url({{asset "fonts/eb-garamond-roman.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+
+    @font-face {
+        font-family: "EB Garamond";
+        font-style: italic;
+        font-weight: 400 800;
+        font-display: optional;
+        src: url({{asset "fonts/eb-garamond-italic.woff2"}}) format("woff2");
+        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+    }
+</style>