fix: optimize font handling via local font with preload and optional …

…display
modernweb-dev · Mar 28, 2022 · cb105c5 · cb105c5
1 parent 1968e23
commit cb105c5
Show file tree

Hide file tree

Showing 17 changed files with 240 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "test": "yarn test:node && yarn test:web",
     "test:integration": "playwright test packages/*/test-node/*.spec.js",
     "test:node": "yarn test:unit && yarn test:integration",
-    "test:unit": "node --trace-warnings ./node_modules/.bin/mocha --require ./scripts/testMochaGlobalHooks.js \"packages/*/test-node/**/*.test.{ts,js,mjs,cjs}\" -- --timeout 5000 --reporter dot --exit",
+    "test:unit": "node --trace-warnings ./node_modules/.bin/mocha --require ./scripts/testMochaGlobalHooks.js \"packages/*/test-node/**/*.test.{ts,js,mjs,cjs}\" -- --timeout 8000 --reporter dot --exit",
     "test:web": "web-test-runner",
     "types": "run-s types:clear types:copy types:build",
     "types:build": "tsc --build",
@@ -85,7 +85,7 @@
     "prettier": "^2.5.1",
     "prettier-plugin-package": "^1.3.0",
     "publish-docs": "^0.1.2",
-    "puppeteer": "^9.0.0",
+    "puppeteer": "^13.0.0",
     "remark-emoji": "^2.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.36.1",

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -30,7 +30,7 @@
     "rocket:build": "node src/cli.js build -c demo",
     "rocket:start": "node src/cli.js start -c demo",
     "start": "npm run rocket:start",
-    "test": "mocha --require ../../scripts/testMochaGlobalHooks.js test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs} --timeout 5000",
+    "test": "mocha --require ../../scripts/testMochaGlobalHooks.js test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs} --timeout 8000",
     "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.{js,cjs}' -- npm test",
     "types:copy": "copyfiles \"./types/**/*.d.ts\" dist-types/",
     "xtest:watch": "mocha test/**/*.test.js --parallel --watch"

diff --git a/packages/cli/src/RocketBuild.js b/packages/cli/src/RocketBuild.js
@@ -188,7 +188,7 @@ export class RocketBuild {
           }
         }
         const url = `http://localhost:${this.engine.devServer.config.port}/${relUrl}`;
-        await page.goto(url);
+        await page.goto(url, { waitUntil: 'networkidle0' });
         await page.screenshot({ path: imagePath });
 
         await unlink(openGraphFile);

diff --git a/packages/launch/__public/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf b/packages/launch/__public/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf
diff --git a/packages/launch/__public/fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2 b/packages/launch/__public/fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2
diff --git a/packages/launch/__public/fonts/OpenSans-VariableFont_wdth,wght.ttf b/packages/launch/__public/fonts/OpenSans-VariableFont_wdth,wght.ttf
diff --git a/packages/launch/__public/fonts/OpenSans-VariableFont_wdth,wght.woff2 b/packages/launch/__public/fonts/OpenSans-VariableFont_wdth,wght.woff2
diff --git a/packages/launch/css/404.css b/packages/launch/css/404.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500');
-
 @-moz-keyframes rocket-movement {
   100% {
     -moz-transform: translate(1200px, -600px);

diff --git a/packages/launch/css/layout.css b/packages/launch/css/layout.css
@@ -5,6 +5,14 @@
   }
 }
 
+@font-face {
+  font-family: 'Open Sans';
+  src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
+    url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+  font-weight: 1 999;
+  font-display: optional;
+}
+
 body {
   margin: 0;
   font-family: var(--primary-font-family);

diff --git a/packages/launch/src/LayoutSidebar.js b/packages/launch/src/LayoutSidebar.js
@@ -136,15 +136,12 @@ export class LayoutSidebar extends Layout {
         <meta name="twitter:card" content="summary_large_image" />
       `,
       head__40: html`
-        <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
-
-        <link
-          href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=optional"
-          rel="stylesheet"
-        />
         <link
-          href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&amp;display=optional"
-          rel="stylesheet"
+          rel="preload"
+          href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+          as="font"
+          type="font/woff2"
+          crossorigin
         />
 
         <link rel="stylesheet" href="resolve:@rocket/launch/css/variables.css" />

diff --git a/presets/spark/src/css/content.css b/presets/spark/src/css/content.css
@@ -3,7 +3,7 @@
   src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
     url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
   font-weight: 1 999;
-  font-display: swap;
+  font-display: optional;
 }
 
 body {

diff --git a/site/pages/10--docs/30--guides/20--social-media.rocket.md b/site/pages/10--docs/30--guides/20--social-media.rocket.md
@@ -57,8 +57,23 @@ export const openGraphLayout = () => html`
   <html lang="en">
     <head>
       <meta charset="utf-8" />
+      <link
+        rel="preload"
+        href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+      />
       <style>
+        @font-face {
+          font-family: 'Open Sans';
+          src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
+            url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+          font-weight: 1 999;
+          font-display: optional;
+        }
         body {
+          font-family: 'Open Sans', sans-serif;
           background: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
           color: #ccc;
           display: block;
@@ -122,6 +137,15 @@ The best approach is to
 See a small screen capture of how that may look
 https://twitter.com/daKmoR/status/1507727164099248135?s=20&t=iESgVMwNfoPuPMbASLfIlw
 
+### Fonts
+
+In most cases the build of rocket will run within a CI (like Github Actions) or via a service (like Netlify build).
+This means that if we locally design your open graph html with a specific font and then generate the open graph image on a different machine then we may get a different result. The reasons for that is that systems fonts are vastly different per Operating System and Service.
+
+To prevent this it's recommended to use a web font as that will make sure wherever the image gets generated it will always have access to the same font.
+
+Loading web fonts can be tricky so be sure to checkout our [web fonts guide](./80--web-fonts.rocket.md).
+
 ### Using the PageTree
 
 Instead of extra defining the data for the open graph image we can use the [PageTree](../20--basics/50--layouts.rocket.md) to automatically get the page title.
@@ -139,8 +163,23 @@ export const openGraphLayout = () => html`
   <html lang="en">
     <head>
       <meta charset="utf-8" />
+      <link
+        rel="preload"
+        href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+      />
       <style>
+        @font-face {
+          font-family: 'Open Sans';
+          src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
+            url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+          font-weight: 1 999;
+          font-display: optional;
+        }
         body {
+          font-family: 'Open Sans', sans-serif;
           background: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
           color: #ccc;
           display: block;
@@ -216,8 +255,23 @@ export const layout = data => html`
   <html lang="en">
     <head>
       <meta charset="utf-8" />
+      <link
+        rel="preload"
+        href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+      />
       <style>
+        @font-face {
+          font-family: 'Open Sans';
+          src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
+            url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+          font-weight: 1 999;
+          font-display: optional;
+        }
         body {
+          font-family: 'Open Sans', sans-serif;
           margin: 20px;
         }
         h1 {

diff --git a/site/pages/10--docs/30--guides/80--web-fonts.rocket.md b/site/pages/10--docs/30--guides/80--web-fonts.rocket.md
@@ -0,0 +1,94 @@
+```js server
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = '10--docs/30--guides/80--web-fonts.rocket.md';
+import {
+  html,
+  layout,
+  setupUnifiedPlugins,
+  components,
+  openGraphLayout,
+} from '../../recursive.data.js';
+export { html, layout, setupUnifiedPlugins, components, openGraphLayout };
+/* END - Rocket auto generated - do not touch */
+
+export const subTitle =
+  'Using a variable font file with preload and optional display means NO layout shift at all';
+```
+
+# Web Fonts
+
+Using web fonts can be tricky and as there are so many considerations
+
+- Use a [Variable Font](https://web.dev/variable-fonts/)?
+- How to [reduced the size](https://web.dev/reduce-webfont-size/)?
+- How to avoid [a layout shift as the font is loaded](https://web.dev/preload-optional-fonts/)?
+- ...
+
+Here is a quick summary of what you should do as of 2022.
+
+1. Use a variable font
+
+   This means only ONE font file needs to be download for all the different weights and widths.
+   This file is usually bigger then one weight of a font but smaller then multiple weights font files.
+
+   Not many fonts are "easily" accessible as a variable font. Often you need to manually [convert](https://convertio.co/ttf-woff/) a variable font ttf file to a web woff2 file.
+
+   If you just need any font then feel free to download the the optimized [Open Sans](/fonts/OpenSans-VariableFont_wdth,wght.woff2) we are using on this page.
+
+   ```css
+   @font-face {
+     font-family: 'Open Sans';
+     src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'), url('/fonts/OpenSans-VariableFont_wdth,wght.woff2')
+         format('woff2-variations');
+     font-weight: 1 999;
+   }
+   ```
+
+2. Preload the web font
+
+   This means the font will start downloading before any CSS has even been parsed.
+
+   ```html
+   <link
+     rel="preload"
+     href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+     as="font"
+     type="font/woff2"
+     crossorigin
+   />
+   ```
+
+3. Use optional fonts
+
+   In combination with 2. this means there will be NO layout shift at all. Nothing will be display until the font is loaded or a timeout (usually 100ms) is reached. If there is a timeout then for this page visit a fallback font will be used.
+   On the next page load the font will be cached and directly rendered with the web font.
+
+   ```css
+   @font-face {
+     font-display: optional;
+   }
+   ```
+
+## Put it all together
+
+All together this means you can use local web fonts and there will be no layout shift.
+
+```html
+<link
+  rel="preload"
+  href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+
+<style>
+  @font-face {
+    font-family: 'Open Sans';
+    src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'), url('/fonts/OpenSans-VariableFont_wdth,wght.woff2')
+        format('woff2-variations');
+    font-weight: 1 999;
+    font-display: optional;
+  }
+</style>
+```
diff --git a/site/pages/index.rocket.js b/site/pages/index.rocket.js
@@ -70,8 +70,24 @@ export const openGraphLayout = data => html`
   <html lang="en">
     <head>
       <meta charset="utf-8" />
-      <style>
+      <link
+        rel="preload"
+        href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+      />
+      <style type="text/css">
+        @font-face {
+          font-family: 'Open Sans';
+          src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2')
+              format('woff2 supports variations'),
+            url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+          font-weight: 1 999;
+          font-display: optional;
+        }
         body {
+          font-family: 'Open Sans', sans-serif;
           background: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
           color: #ccc;
           font-size: 30px;
@@ -102,10 +118,11 @@ export const openGraphLayout = data => html`
         }
         #bg-wrapper img {
           position: absolute;
-          right: -17%;
-          top: -7%;
+          right: -15%;
+          top: -6%;
           transform: rotate(45deg);
-          width: 69%;
+          width: 61%;
+          z-index: 10;
         }
         .item {
           display: flex;

diff --git a/site/pages/pageTreeData.rocketGenerated.json b/site/pages/pageTreeData.rocketGenerated.json
@@ -607,6 +607,11 @@
                   "id": "adjusting-the-open-graph-layout",
                   "level": 3
                 },
+                {
+                  "text": "Fonts",
+                  "id": "fonts",
+                  "level": 3
+                },
                 {
                   "text": "Using the PageTree",
                   "id": "using-the-pagetree",
@@ -819,6 +824,29 @@
               "outputRelativeFilePath": "docs/guides/styles-and-css/index.html",
               "sourceRelativeFilePath": "10--docs/30--guides/70--styles-and-css.rocket.md",
               "level": 3
+            },
+            {
+              "title": "Web Fonts | Rocket",
+              "h1": "Web Fonts",
+              "headlinesWithId": [
+                {
+                  "text": "Web Fonts",
+                  "id": "web-fonts",
+                  "level": 1
+                },
+                {
+                  "text": "Put it all together",
+                  "id": "put-it-all-together",
+                  "level": 2
+                }
+              ],
+              "name": "Web Fonts",
+              "menuLinkText": "Web Fonts",
+              "url": "/docs/guides/web-fonts/",
+              "outputRelativeFilePath": "docs/guides/web-fonts/index.html",
+              "sourceRelativeFilePath": "10--docs/30--guides/80--web-fonts.rocket.md",
+              "level": 3,
+              "subTitle": "Using a variable font file with preload and optional display means NO layout shift at all"
             }
           ]
         }