Improve font performance
MODIFY
website/docs/src/_includes/layout.liquid
website/docs/src/_includes/layout.liquid
@@ -13,6 +13,10 @@ social-image: social-logo.png
<link rel="alternate icon" type="image/png" href="/img/favicon.png">
<link rel="icon" type="image/svg+xml" href="{{ "static/img/favicon.svg" | includeraw | toBase64: "svg" | safe }}">
+ <link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2">
+ <link rel="preload" href="/fonts/Inter-Bold.woff2" as="font" type="font/woff2">
+ <link rel="preload" href="/fonts/Inter-Medium.woff2" as="font" type="font/woff2">
+
<meta name="description" content="{{ description | escape }}">
<meta name="theme-color" content="#FFC905">
<meta property="og:title" content="{{ title | titlify }}">

MODIFY
website/docs/src/styles/_fonts.scss
website/docs/src/styles/_fonts.scss
font-style: normal;
font-weight: 100;
font-display: swap;
- src: url("/fonts/Inter-Thin.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-Thin.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-Thin.woff2") format("woff2"),
+ url("/fonts/Inter-Thin.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
- src: url("/fonts/Inter-ThinItalic.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-ThinItalic.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-ThinItalic.woff2") format("woff2"),
+ url("/fonts/Inter-ThinItalic.woff") format("woff");
}
@font-face {
font-style: normal;
font-weight: 200;
font-display: swap;
- src: url("/fonts/Inter-ExtraLight.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-ExtraLight.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-ExtraLight.woff2") format("woff2"),
+ url("/fonts/Inter-ExtraLight.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
- src: url("/fonts/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-ExtraLightItalic.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-ExtraLightItalic.woff2") format("woff2"),
+ url("/fonts/Inter-ExtraLightItalic.woff") format("woff");
}
@font-face {
font-style: normal;
font-weight: 300;
font-display: swap;
- src: url("/fonts/Inter-Light.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-Light.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-Light.woff2") format("woff2"),
+ url("/fonts/Inter-Light.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
- src: url("/fonts/Inter-LightItalic.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-LightItalic.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-LightItalic.woff2") format("woff2"),
+ url("/fonts/Inter-LightItalic.woff") format("woff");
}
@font-face {
font-style: normal;
font-weight: 400;
font-display: swap;
- src: url("/fonts/Inter-Regular.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-Regular.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-Regular.woff2") format("woff2"),
+ url("/fonts/Inter-Regular.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
- src: url("/fonts/Inter-Italic.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-Italic.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-Italic.woff2") format("woff2"),
+ url("/fonts/Inter-Italic.woff") format("woff");
}
@font-face {
font-style: normal;
font-weight: 500;
font-display: swap;
- src: url("/fonts/Inter-Medium.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-Medium.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-Medium.woff2") format("woff2"),
+ url("/fonts/Inter-Medium.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
- src: url("/fonts/Inter-MediumItalic.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-MediumItalic.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-MediumItalic.woff2") format("woff2"),
+ url("/fonts/Inter-MediumItalic.woff") format("woff");
}
@font-face {
font-style: normal;
font-weight: 600;
font-display: swap;
- src: url("/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-SemiBold.woff2") format("woff2"),
+ url("/fonts/Inter-SemiBold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
- src: url("/fonts/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
+ url("/fonts/Inter-SemiBoldItalic.woff") format("woff");
}
@font-face {
font-style: normal;
font-weight: 700;
font-display: swap;
- src: url("/fonts/Inter-Bold.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-Bold.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-Bold.woff2") format("woff2"),
+ url("/fonts/Inter-Bold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
- src: url("/fonts/Inter-BoldItalic.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-BoldItalic.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-BoldItalic.woff2") format("woff2"),
+ url("/fonts/Inter-BoldItalic.woff") format("woff");
}
@font-face {
font-style: normal;
font-weight: 800;
font-display: swap;
- src: url("/fonts/Inter-ExtraBold.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-ExtraBold.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-ExtraBold.woff2") format("woff2"),
+ url("/fonts/Inter-ExtraBold.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
- src: url("/fonts/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-ExtraBoldItalic.woff2") format("woff2"),
+ url("/fonts/Inter-ExtraBoldItalic.woff") format("woff");
}
@font-face {
font-style: normal;
font-weight: 900;
font-display: swap;
- src: url("/fonts/Inter-Black.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-Black.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-Black.woff2") format("woff2"),
+ url("/fonts/Inter-Black.woff") format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
- src: url("/fonts/Inter-BlackItalic.woff2?v=3.19") format("woff2"),
- url("/fonts/Inter-BlackItalic.woff?v=3.19") format("woff");
+ src: url("/fonts/Inter-BlackItalic.woff2") format("woff2"),
+ url("/fonts/Inter-BlackItalic.woff") format("woff");
}
/* -------------------------------------------------------
@@ -166,7 +166,7 @@ Usage:
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
- src: url("/fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+ src: url("/fonts/Inter-roman.var.woff2") format("woff2");
}
@font-face {
font-family: 'Inter var';
@@ -174,7 +174,7 @@ Usage:
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
- src: url("/fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+ src: url("/fonts/Inter-italic.var.woff2") format("woff2");
}
@@ -196,5 +196,5 @@ explicitly, e.g.
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
- src: url("/fonts/Inter.var.woff2?v=3.19") format("woff2");
+ src: url("/fonts/Inter.var.woff2") format("woff2");
}

Improve font performance