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

* replaced inter with inter-variable, added preload to avoid FOUT

* updated css file

* removed comment

gatsby-browser.js

@@ -1,5 +1,5 @@
 import wrapPageElementWithTransition from './src/helpers/wrapPageElement.js';
-import '@fontsource/inter';
+import '@fontsource-variable/inter';
 
 require('gatsby-remark-vscode/styles.css');
 

gatsby-ssr.js

@@ -1,4 +1,20 @@
+import * as React from 'react';
 import wrapPageElementWithTransition from './src/helpers/wrapPageElement.js';
+import '@fontsource-variable/inter';
+import interWoff2 from '@fontsource-variable/inter/files/inter-latin-wght-normal.woff2?url';
+
+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;

package.json

@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
-    "@fontsource/inter": "^5.1.0",
+    "@fontsource-variable/inter": "^5.1.0",
     "@giscus/react": "^3.0.0",
     "@microsoft/applicationinsights-web": "^3.3.3",
     "@raae/gatsby-remark-oembed": "^0.3.3",

src/style.css

@@ -39,7 +39,7 @@
 }
 
 html {
-  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-family: "Inter Variable", sans-serif
 }
 
 body {

yarn.lock

@@ -2708,10 +2708,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: 48c740b8a311908ca9527bf598e759bdfad6429f730450cc4904877915537e857a322db3ff7ade0bf731a3853ab34e611638d560529774a7e94ca2237735c86b
+  resolution: "@fontsource-variable/inter@npm:5.1.0"
+  checksum: 6b46019c71380f6e18427b4b19468a9a656609fcf613b8472f7b928ec1bc6f13b03d1dd0bb9536cd168a53e58c009465e2245cd87ef57f9925a07d2306bd8f58
   languageName: node
   linkType: hard
 
@@ -6791,7 +6791,7 @@ __metadata:
     "@auth0/auth0-react": "npm:^2.2.4"
     "@babel/eslint-parser": "npm:^7.25.1"
     "@babel/preset-react": "npm:^7.24.7"
-    "@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-solid-svg-icons": "npm:^6.6.0"