From 44e3800e1b3bcb1716e7ddf4915aea8586916293 Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Sat, 11 Jun 2022 13:41:53 +0200
Subject: [PATCH] Preload main custom font & display fallback font while
loading
---
_layouts/default.html | 1 +
_sass/fonts.scss | 9 ++++++---
2 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/_layouts/default.html b/_layouts/default.html
index d249ff6..6eddd7a 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -14,6 +14,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/favicon/favicon-16x16.png' | relative_url }}">
<link rel="manifest" href="{{ 'site.webmanifest' | relative_url }}">
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: timestamp | relative_url }}">
+ <link rel="preload" href="{{ '/assets/fonts/open-sans-v28-latin-regular.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin>
</head>
<body>
<header class="page-header" role="banner">
diff --git a/_sass/fonts.scss b/_sass/fonts.scss
index 23835bd..f8cb2a6 100644
--- a/_sass/fonts.scss
+++ b/_sass/fonts.scss
@@ -1,7 +1,8 @@
@font-face {
font-family: 'Open Sans';
- font-style: normal;
font-weight: 400;
+ font-style: normal;
+ font-display: swap;
src: local('Open Sans Regular'),
local('OpenSans-Regular'),
url('../fonts/open-sans-v28-latin-regular.woff2') format('woff2'),
@@ -11,8 +12,9 @@
@font-face {
font-family: 'Open Sans';
- font-style: normal;
font-weight: 700;
+ font-style: normal;
+ font-display: swap;
src: local('Open Sans Semibold'),
local('OpenSans-Semibold'),
url('../fonts/open-sans-v28-latin-600.woff2') format('woff2'),
@@ -22,8 +24,9 @@
@font-face {
font-family: 'Open Sans';
- font-style: italic;
font-weight: 400;
+ font-style: italic;
+ font-display: swap;
src: local('Open Sans Italic'),
local('OpenSans-Italic'),
url('../fonts/open-sans-v28-latin-italic.woff2') format('woff2'),