♻️ Inter Font - Added preload to avoid FOUT issues (#700)

replaced inter with inter-variable package, added preload link to html header
SSWConsulting · Nov 8, 2024 · 9e44ce3 · 9e44ce3
1 parent 83f701a
commit 9e44ce3
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -5,7 +5,7 @@ import AppProvider from 'store/provider';
 // import axios from 'axios';
 import { ApplicationInsights } from '@microsoft/applicationinsights-web';
 import { SeverityLevel } from '@microsoft/applicationinsights-web';
-import '@fontsource/inter';
+import '@fontsource-variable/inter';
 // import { siteUrlCn } from './site-config.js';
 
 const environment = process.env.NODE_ENV;

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -3,6 +3,8 @@ import { renderToString } from 'react-dom/server';
 import { ServerStyleSheet } from 'styled-components';
 import AppProvider from 'store/provider';
 import wrapPageElementWithTransition from 'helpers/wrapPageElement';
+import '@fontsource-variable/inter';
+import interWoff2 from '@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url';
 
 export const replaceRenderer = ({
   bodyComponent,
@@ -20,5 +22,18 @@ export const replaceRenderer = ({
   setHeadComponents(styleElement);
 };
 
+export const onRenderBody = ({ setHeadComponents }) => {
+  setHeadComponents([
+    <link
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      href={interWoff2}
+      crossOrigin="anonymous"
+      key="interPreload"
+    />,
+  ]);
+};
+
 // Page Transitions
 export const wrapPageElement = wrapPageElementWithTransition;
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   "dependencies": {
     "@babel/core": "^7.25.2",
     "@brainhubeu/react-carousel": "^2.0.4",
-    "@fontsource/inter": "^5.1.0",
+    "@fontsource-variable/inter": "^5.1.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@microsoft/applicationinsights-web": "^3.3.3",

diff --git a/src/style.css b/src/style.css
@@ -58,7 +58,7 @@
 }
 
 html {
-  font-family: "Inter",Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-family: "Inter Variable", sans-serif;
   color:#333;
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -2023,10 +2023,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fontsource/inter@npm:^5.1.0":
+"@fontsource-variable/inter@npm:^5.1.0":
   version: 5.1.0
-  resolution: "@fontsource/inter@npm:5.1.0"
-  checksum: 10c0/48c740b8a311908ca9527bf598e759bdfad6429f730450cc4904877915537e857a322db3ff7ade0bf731a3853ab34e611638d560529774a7e94ca2237735c86b
+  resolution: "@fontsource-variable/inter@npm:5.1.0"
+  checksum: 10c0/6b46019c71380f6e18427b4b19468a9a656609fcf613b8472f7b928ec1bc6f13b03d1dd0bb9536cd168a53e58c009465e2245cd87ef57f9925a07d2306bd8f58
   languageName: node
   linkType: hard
 
@@ -21397,7 +21397,7 @@ __metadata:
     "@babel/eslint-parser": "npm:^7.25.1"
     "@babel/preset-react": "npm:^7.24.7"
     "@brainhubeu/react-carousel": "npm:^2.0.4"
-    "@fontsource/inter": "npm:^5.1.0"
+    "@fontsource-variable/inter": "npm:^5.1.0"
     "@fortawesome/fontawesome-svg-core": "npm:^6.6.0"
     "@fortawesome/free-brands-svg-icons": "npm:^6.6.0"
     "@fortawesome/free-regular-svg-icons": "npm:^6.6.0"
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,7 @@ @@
     }
     html {
-      font-family: "Inter",Helvetica Neue,Helvetica,Arial,sans-serif;
+      font-family: "Inter Variable", sans-serif;
       color:#333;
     }
@@ Expand Down @@