Make font-display optional instead of swap. The CLS impact of swap is…

… too bad
hlnb · Jan 28, 2021 · bff0ad7 · bff0ad7
1 parent bf130e8
commit bff0ad7
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -104,7 +104,7 @@ npm run build
 #### Fonts
 
 - Serves fonts from same origin.
-- Makes fonts `display:swap`.
+- Makes fonts `display:optional`.
 
 #### Analytics
 

diff --git a/_11ty/optimize-html.js b/_11ty/optimize-html.js
@@ -31,7 +31,7 @@ const csso = require("csso");
 
 /**
  * Inlines the CSS.
- * Makes font display display-swap
+ * Makes font display display-optional
  * Minifies and optimizes the JS
  * Optimizes HTML
  * Optimizes AMP
@@ -49,7 +49,10 @@ const purifyCss = async (rawContent, outputPath) => {
       encoding: "utf-8",
     });
 
-    before = before.replace(/@font-face {/g, "@font-face {font-display:swap;");
+    before = before.replace(
+      /@font-face {/g,
+      "@font-face {font-display:optional;"
+    );
 
     const purged = await new PurgeCSS().purge({
       content: [