davejansen/Ghost-Theme-Source
1
0
Fork 0
Code Issues Pull Requests Activity

Improved font loading method for better performance

Browse Source
This commit is contained in:
Sodbileg Gansukh
2024-06-17 15:40:06 +08:00
parent 9a2f77a5b9
commit e860b018a3
8 changed files with 74 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

45
assets/css/screen.css
View File

@@ -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
/* ---------------------------------------------------------- */

3
default.hbs
View File

@@ -11,6 +11,9 @@
<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"}}">

15
partials/typography/fonts.hbs Normal file
View File

@@ -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}}

21
partials/typography/mono.hbs Normal file
View File

@@ -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>

11
partials/typography/sans.hbs Normal file
View File

@@ -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>

21
partials/typography/serif.hbs Normal file
View File

@@ -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>