Merge pull request #162 from AmazeeLabs/SLB-222-Font-loading

SLB-222: locally host and preload fonts

apps/website/gatsby-ssr.ts → apps/website/gatsby-ssr.tsx

@@ -1,9 +1,13 @@
 import { Locale } from '@custom/schema';
 import { GatsbySSR } from 'gatsby';
+import React from 'react';
+
+import fonts from './node_modules/@custom/ui/build/preloaded-fonts.json';
 
 export const onRenderBody: GatsbySSR['onRenderBody'] = ({
   setHtmlAttributes,
   pathname,
+  setHeadComponents,
 }) => {
   const locales = Object.values(Locale);
   if (locales.length === 1) {
@@ -22,4 +26,17 @@ export const onRenderBody: GatsbySSR['onRenderBody'] = ({
       // We don't know the language.
     }
   }
+
+  fonts.forEach((font) => {
+    setHeadComponents([
+      <link
+        rel="preload"
+        href={font}
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+        key={font}
+      />,
+    ]);
+  });
 };

packages/ui/.storybook/main.ts

@@ -3,6 +3,12 @@ import { mergeConfig, UserConfig } from 'vite';
 import { imagetools } from 'vite-imagetools';
 import { resolve, dirname } from 'path';
 
+import { readdirSync } from 'fs';
+
+const fonts = readdirSync(`static/public/fonts/preload`).map((font) => {
+  return `/fonts/preload/${font}`;
+});
+
 const config: StorybookConfig = {
   viteFinal: (config, { configType }) =>
     mergeConfig(config, {
@@ -36,5 +42,14 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  previewHead: (head) => `
+    ${head}
+    ${fonts
+      .map(
+        (font: string) =>
+          `<link rel="preload" href="${font}" as="font" type="font/woff2" crossOrigin="anonymous" />`,
+      )
+      .join('\n')}
+  `,
 };
 export default config;

packages/ui/package.json

@@ -24,6 +24,7 @@
   "scripts": {
     "prep:types": "tsc --emitDeclarationOnly",
     "prep:scripts": "swc ./src -d ./build",
+    "prep:fonts": "mkdir -p build && node preloaded-fonts.js",
     "prep:styles": "NODE_ENV=production pnpm postcss src/tailwind.css -o build/styles.css",
     "prep:iframe": "NODE_ENV=production pnpm postcss src/iframe.css -o build/iframe.css",
     "prep:gutenberg": "NODE_ENV=production PREFIX=gutenberg pnpm postcss src/tailwind.css -o build/gutenberg.css",
@@ -82,6 +83,7 @@
     "@types/react": "^18.2.46",
     "@types/react-body-classname": "^1.1.10",
     "@types/react-dom": "^18.2.18",
+    "@types/node": "~18.15.3",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.16",
     "axe-playwright": "^2.0.1",

packages/ui/preloaded-fonts.js

@@ -0,0 +1,10 @@
+import { readdirSync, writeFileSync } from 'fs';
+
+writeFileSync(
+  'build/preloaded-fonts.json',
+  JSON.stringify(
+    readdirSync(`static/public/fonts/preload`).map((font) => {
+      return `/fonts/preload/${font}`;
+    }),
+  ),
+);

packages/ui/src/components/Atoms/Fonts.css

@@ -0,0 +1,76 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('/fonts/preload/Inter-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('/fonts/preload/Inter-LightItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/preload/Inter-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  src: url('/fonts/preload/Inter-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/fonts/preload/Inter-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 500;
+  src: url('/fonts/preload/Inter-MediumItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/fonts/preload/Inter-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 600;
+  src: url('/fonts/preload/Inter-SemiBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/fonts/preload/Inter-Bold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 600;
+  src: url('/fonts/preload/Inter-BoldItalic.woff2') format('woff2');
+}
+
+html,
+body {
+  font-family: 'Inter', sans-serif;
+}

packages/ui/src/tailwind.css

@@ -1,4 +1,5 @@
 /* Import all atom stylesheets. */
+@import './components/Atoms/Fonts.css';
 @import './components/Atoms/Container.css';
 @import './components/Atoms/List.css';
 

packages/ui/turbo.json

@@ -2,6 +2,10 @@
   "$schema": "https://turborepo.org/schema.json",
   "extends": ["//"],
   "pipeline": {
+    "prep:fonts": {
+      "inputs": ["static/public/fonts/preload/**"],
+      "outputs": ["build/preloaded-fonts.json"]
+    },
     "prep:scripts": {
       "dependsOn": ["^prep"],
       "inputs": [
@@ -48,6 +52,7 @@
     },
     "prep": {
       "dependsOn": [
+        "prep:fonts",
         "prep:types",
         "prep:scripts",
         "prep:styles",