Improve font loading

Author: philwareham

src/assets/sass/modules/_fonts.scss

@@ -11,7 +11,7 @@
     font-family: "PT Serif";
     font-style: normal;
     font-weight: normal;
-    font-display: swap;
+    font-display: optional;
     src: url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-regular.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-regular.woff") format("woff");
 }
 
@@ -20,7 +20,7 @@
     font-family: "PT Serif";
     font-style: italic;
     font-weight: normal;
-    font-display: swap;
+    font-display: optional;
     src: url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-italic.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-italic.woff") format("woff");
 }
 
@@ -29,7 +29,7 @@
     font-family: "PT Serif";
     font-style: normal;
     font-weight: bold;
-    font-display: swap;
+    font-display: optional;
     src: url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-700.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-700.woff") format("woff");
 }
 
@@ -38,6 +38,6 @@
     font-family: "PT Serif";
     font-style: italic;
     font-weight: bold;
-    font-display: swap;
+    font-display: optional;
     src: url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-700italic.woff2") format("woff2"), url("https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-700italic.woff") format("woff");
 }

src/mockups/blog-article.html

@@ -6,6 +6,8 @@
     <title>Blog article example / Textpattern CMS</title>
 
 <!-- CSS -->
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-regular.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-700.woff2" as="font" type="font/woff2">
     <link rel="stylesheet" href="../assets/css/style.css">
 
     <meta name="robots" content="index, follow">

src/mockups/blog-landing.html

@@ -6,6 +6,8 @@
     <title>Blog / Textpattern CMS</title>
 
 <!-- CSS -->
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-regular.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-700.woff2" as="font" type="font/woff2">
     <link rel="stylesheet" href="../assets/css/style.css">
 
     <meta name="robots" content="index, follow">

src/mockups/documentation-example.html

@@ -6,6 +6,8 @@
     <title>Article custom / Textpattern CMS Documentation</title>
 
 <!-- CSS -->
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-regular.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-700.woff2" as="font" type="font/woff2">
     <link rel="stylesheet" href="../assets/css/style.css">
 
     <meta name="robots" content="index, follow">

src/mockups/error.html

@@ -6,6 +6,8 @@
     <title>Error page example / Textpattern CMS</title>
 
 <!-- CSS -->
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-regular.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-700.woff2" as="font" type="font/woff2">
     <link rel="stylesheet" href="../assets/css/style.@@timestamp.css">
 
     <meta name="robots" content="none">

src/mockups/get-started.html

@@ -6,6 +6,8 @@
     <title>Get started with Textpattern / Textpattern CMS</title>
 
 <!-- CSS -->
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-regular.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-700.woff2" as="font" type="font/woff2">
     <link rel="stylesheet" href="../assets/css/style.css">
 
     <meta name="robots" content="index, follow">

src/mockups/index.html

@@ -6,6 +6,8 @@
     <title>Textpattern CMS | Open source content management system</title>
 
 <!-- CSS -->
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-regular.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-700.woff2" as="font" type="font/woff2">
     <link rel="stylesheet" href="../assets/css/style.css">
 
     <meta name="robots" content="index, follow">

src/mockups/showcase-article.html

@@ -6,6 +6,8 @@
     <title>Art and Culture Center/Hollywood / Textpattern CMS</title>
 
 <!-- CSS -->
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-regular.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-700.woff2" as="font" type="font/woff2">
     <link rel="stylesheet" href="../assets/css/style.css">
 
     <meta name="robots" content="index, follow">

src/mockups/showcase-landing.html

@@ -6,6 +6,8 @@
     <title>Site showcase / Textpattern CMS</title>
 
 <!-- CSS -->
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-regular.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="../assets/fonts/pt-serif-v11-latin-ext-700.woff2" as="font" type="font/woff2">
     <link rel="stylesheet" href="../assets/css/style.css">
 
     <meta name="robots" content="index, follow">

src/templates/forms/misc/head.txp

@@ -1,5 +1,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<link rel="preload" href="https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-regular.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="https://textpattern.com/assets/fonts/pt-serif-v11-latin-ext-700.woff2" as="font" type="font/woff2" crossorigin>
 <link rel="stylesheet" href="https://textpattern.com/assets/css/style.@@timestamp.css">
 <link rel="manifest" href="/site.webmanifest">
 <link rel="icon" sizes="32x32" href="/favicon-32x32.png">