feat(css): Reduce layout shift with fonts fallback

README.md

@@ -22,6 +22,14 @@ node --run dev
 node --run build
 ```
 
+## Fonts
+
+Generate fonts fallback CSS file:
+
+```sh
+node generate-fonts-fallback.js
+```
+
 ## Formatting
 
 ```sh

generate-fonts-fallback.js

@@ -0,0 +1,32 @@
+import fs from "node:fs/promises";
+
+import { createFontStack } from "@capsizecss/core";
+import Arial from "@capsizecss/metrics/arial";
+import NotoSans from "@capsizecss/metrics/notoSans";
+import Roboto from "@capsizecss/metrics/roboto";
+import Teko from "@capsizecss/metrics/teko";
+import WorkSans from "@capsizecss/metrics/workSans";
+import prettier from "prettier";
+import stylelint from "stylelint";
+
+const filepath = "./public/css/global/fonts-fallback.css";
+
+const heading = createFontStack([Teko, NotoSans, Roboto, Arial]);
+const text = createFontStack([WorkSans, NotoSans, Roboto, Arial]);
+
+let code = `
+${heading.fontFaces}
+${text.fontFaces}
+`;
+
+// Run Stylelint autofixer
+const linterResult = await stylelint.lint({ code, fix: true });
+code = linterResult.code ?? "";
+
+// Run Prettier formatter
+const prettierOptions = await prettier.resolveConfig(filepath, {
+	editorconfig: true,
+});
+code = await prettier.format(code, { filepath, ...prettierOptions });
+
+await fs.writeFile(filepath, code);

package.json

@@ -33,6 +33,8 @@
 		"@11ty/eleventy-plugin-rss": "^2.0.1",
 		"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
 		"@11ty/eleventy-plugin-webc": "^0.11.2",
+		"@capsizecss/core": "^4.1.2",
+		"@capsizecss/metrics": "^3.2.0",
 		"@eslint/js": "^9.5.0",
 		"eslint": "^9.5.0",
 		"eslint-plugin-simple-import-sort": "^12.1.0",

public/css/global/fonts-fallback.css

@@ -0,0 +1,49 @@
+@font-face {
+	ascent-override: 155.511%;
+	descent-override: 77.1062%;
+	font-family: "Teko Fallback: Noto Sans";
+	size-adjust: 61.6034%;
+	src: local("Noto Sans Regular"), local("NotoSans-Regular");
+}
+
+@font-face {
+	ascent-override: 145.9389%;
+	descent-override: 72.3601%;
+	font-family: "Teko Fallback: Roboto";
+	size-adjust: 65.6439%;
+	src: local("Roboto"), local("Roboto-Regular");
+}
+
+@font-face {
+	ascent-override: 146.2593%;
+	descent-override: 72.519%;
+	font-family: "Teko Fallback: Arial";
+	line-gap-override: 0%;
+	size-adjust: 65.5001%;
+	src: local("Arial"), local("ArialMT");
+}
+
+@font-face {
+	ascent-override: 88.3407%;
+	descent-override: 23.0826%;
+	font-family: "Work Sans Fallback: Noto Sans";
+	size-adjust: 105.2743%;
+	src: local("Noto Sans Regular"), local("NotoSans-Regular");
+}
+
+@font-face {
+	ascent-override: 82.9031%;
+	descent-override: 21.6618%;
+	font-family: "Work Sans Fallback: Roboto";
+	size-adjust: 112.1791%;
+	src: local("Roboto"), local("Roboto-Regular");
+}
+
+@font-face {
+	ascent-override: 83.0851%;
+	descent-override: 21.7093%;
+	font-family: "Work Sans Fallback: Arial";
+	line-gap-override: 0%;
+	size-adjust: 111.9334%;
+	src: local("Arial"), local("ArialMT");
+}

public/css/main.css

@@ -9,6 +9,7 @@
 /* Global */
 
 @import url("global/fonts.css") layer(global);
+@import url("global/fonts-fallback.css") layer(global);
 @import url("global/base.css") layer(global);
 
 /* Typography */

public/css/tokens/typo.css

@@ -1,10 +1,12 @@
 :root {
 	/* Default */
-	--typo-Default-font-family: "Work Sans", sans-serif;
+	--typo-Default-font-family: "Work Sans", "Work Sans Fallback: Noto Sans",
+		"Work Sans Fallback: Roboto", "Work Sans Fallback: Arial", sans-serif;
 	--typo-Default-line-height: 1.4;
 
 	/* Heading */
-	--typo-Heading-font-family: "Teko", serif;
+	--typo-Heading-font-family: "Teko", "Teko Fallback: Noto Sans",
+		"Teko Fallback: Roboto", "Teko Fallback: Arial", sans-serif;
 	--typo-Heading-font-weight: 600;
 	--typo-Heading-line-height: 1;