Skip to content

Commit e860b01

Browse files
minimaluminiumminimaluminium
committed
Improved font loading method for better performance
1 parent 9a2f77a commit e860b01

File tree

8 files changed

+74
-46
lines changed

8 files changed

+74
-46
lines changed

‎assets/built/screen.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/built/screen.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/css/screen.css

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -83,50 +83,7 @@ production stylesheet in assets/built/screen.css
8383
/* 2. Fonts
8484
/* ---------------------------------------------------------- */
8585

86-
@font-face {
87-
font-family: "Inter";
88-
font-style: normal;
89-
font-weight: 100 900;
90-
font-display: swap;
91-
src: url(../fonts/inter-roman.woff2) format("woff2");
92-
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;
93-
}
94-
95-
@font-face {
96-
font-family: "EB Garamond";
97-
font-style: normal;
98-
font-weight: 400 800;
99-
font-display: swap;
100-
src: url(../fonts/eb-garamond-roman.woff2) format("woff2");
101-
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;
102-
}
103-
104-
@font-face {
105-
font-family: "EB Garamond";
106-
font-style: italic;
107-
font-weight: 400 800;
108-
font-display: swap;
109-
src: url(../fonts/eb-garamond-italic.woff2) format("woff2");
110-
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;
111-
}
112-
113-
@font-face {
114-
font-family: "JetBrains Mono";
115-
font-style: normal;
116-
font-weight: 100 800;
117-
font-display: swap;
118-
src: url(../fonts/jetbrains-mono-roman.woff2) format("woff2");
119-
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;
120-
}
121-
122-
@font-face {
123-
font-family: "JetBrains Mono";
124-
font-style: italic;
125-
font-weight: 100 800;
126-
font-display: swap;
127-
src: url(../fonts/jetbrains-mono-italic.woff2) format("woff2");
128-
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;
129-
}
86+
/* Fonts are preloaded and defined in default.hbs to avoid layout shift */
13087

13188
/* 3. Resets
13289
/* ---------------------------------------------------------- */

‎default.hbs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
{{!-- Preload main styles and scripts for better performance --}}
1111
<link rel="preload" as="style" href="{{asset "built/screen.css"}}">
1212
<link rel="preload" as="script" href="{{asset "built/source.js"}}">
13+
14+
{{!-- Fonts are preloaded and defined in the default template to avoid layout shift --}}
15+
{{> "typography/fonts"}}
1316

1417
{{!-- Theme assets - use the {{asset}} helper to reference styles & scripts, this will take care of caching and cache-busting automatically --}}
1518
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}">

‎partials/typography/fonts.hbs

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{{!-- Sans-serif font is always loaded, because it's the default font for some part of the theme regardless of the settings --}}
2+
{{> "fonts/sans"}}
3+
4+
{{#match @custom.title_font "Modern sans-serif"}}
5+
{{#match @custom.body_font "Elegant serif"}}
6+
{{> "fonts/serif"}}
7+
{{/match}}
8+
{{else match @custom.title_font "Elegant serif"}}
9+
{{> "fonts/serif"}}
10+
{{else}}
11+
{{> "fonts/mono"}}
12+
{{#match @custom.body_font "Elegant serif"}}
13+
{{> "fonts/serif"}}
14+
{{/match}}
15+
{{/match}}

‎partials/typography/mono.hbs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/jetbrains-mono-roman.woff2"}}" crossorigin="anonymous">
2+
<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/jetbrains-mono-italic.woff2"}}" crossorigin="anonymous">
3+
<style>
4+
@font-face {
5+
font-family: "JetBrains Mono";
6+
font-style: normal;
7+
font-weight: 100 800;
8+
font-display: optional;
9+
src: url({{asset "fonts/jetbrains-mono-roman.woff2"}}) format("woff2");
10+
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;
11+
}
12+
13+
@font-face {
14+
font-family: "JetBrains Mono";
15+
font-style: italic;
16+
font-weight: 100 800;
17+
font-display: optional;
18+
src: url({{asset "fonts/jetbrains-mono-italic.woff2"}}) format("woff2");
19+
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;
20+
}
21+
</style>

‎partials/typography/sans.hbs

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/inter-roman.woff2"}}" crossorigin="anonymous">
2+
<style>
3+
@font-face {
4+
font-family: "Inter";
5+
font-style: normal;
6+
font-weight: 100 900;
7+
font-display: optional;
8+
src: url({{asset "fonts/inter-roman.woff2"}}) format("woff2");
9+
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;
10+
}
11+
</style>

‎partials/typography/serif.hbs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/eb-garamond-roman.woff2"}}" crossorigin="anonymous">
2+
<link rel="preload" as="font" type="font/woff2" href="{{asset "fonts/eb-garamond-italic.woff2"}}" crossorigin="anonymous">
3+
<style>
4+
@font-face {
5+
font-family: "EB Garamond";
6+
font-style: normal;
7+
font-weight: 400 800;
8+
font-display: optional;
9+
src: url({{asset "fonts/eb-garamond-roman.woff2"}}) format("woff2");
10+
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;
11+
}
12+
13+
@font-face {
14+
font-family: "EB Garamond";
15+
font-style: italic;
16+
font-weight: 400 800;
17+
font-display: optional;
18+
src: url({{asset "fonts/eb-garamond-italic.woff2"}}) format("woff2");
19+
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;
20+
}
21+
</style>

0 commit comments

Comments
 (0)