Skip to content

perf: Load fonts with font-display swap, preloads and caching #889

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lfrancke wants to merge 1 commit into
base: main
Choose a base branch
from
+18 −3
Open

perf: Load fonts with font-display swap, preloads and caching #889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions netlify.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,11 @@
from = "/home/stable/release_notes.html"
to = "/home/stable/release-notes"
status = 301

# The UI bundle assets change only when a new site version is deployed;
# a day of caching covers the Lighthouse "efficient cache lifetimes" finding
# without risking a long-lived stale css after a redesign deploy.
[[headers]]
for = "/_/*"
[headers.values]
Cache-Control = "public, max-age=86400"
11 changes: 8 additions & 3 deletions ui/src/css/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/* How do fonts work in this build setup?
* Fonts are installed from fontsource packages.
* In the file ./gulp.d/tasks/build.js there is an action that copies the font files
* from the installed packages into the output directory, based on matching file names.
* search for 'fontsource' in the file, and you will find a post CSS action.
* The build (ui/build.mjs) resolves the ~@fontsource urls below and emits the
* font files into the bundle's font/ directory.
*/

/* Noto Sans - the base font for the body */

@font-face {
font-display: swap;
font-family: "Noto Sans";
font-style: normal;
font-weight: 400;
Expand All @@ -17,6 +17,7 @@
}

@font-face {
font-display: swap;
font-family: "Noto Sans";
font-style: normal;
font-weight: 700;
Expand All @@ -28,6 +29,7 @@
/* IMB Plex Mono - the header font */

@font-face {
font-display: swap;
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
Expand All @@ -37,6 +39,7 @@
}

@font-face {
font-display: swap;
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
Expand All @@ -48,6 +51,7 @@
/* Noto Sans Mono - The monospace font for code blocks */

@font-face {
font-display: swap;
font-family: "Noto Sans Mono";
font-style: normal;
font-weight: 400;
Expand All @@ -57,6 +61,7 @@
}

@font-face {
font-display: swap;
font-family: "Noto Sans Mono";
font-style: normal;
font-weight: 500;
Expand Down
2 changes: 2 additions & 0 deletions ui/src/partials/head-styles.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
<link rel="preload" href="{{{uiRootPath}}}/font/noto-sans-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{{uiRootPath}}}/font/ibm-plex-mono-latin-600-normal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
<link rel="stylesheet" href="/_/pagefind/pagefind-modular-ui.css">
Loading