From f953cdb0fb24ff18714e90b59106e40fed9201ca Mon Sep 17 00:00:00 2001
From: "Babanazar Kamyljanov [SSW]"
 <138548013+babakamyljanovssw@users.noreply.github.com>
Date: Wed, 6 Nov 2024 15:56:40 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Inter=20Font=20-=20Added?=
 =?UTF-8?q?=20preload=20to=20avoid=20FOUT=20issues=20(#1623)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* updated css file

* removed comment
---
 gatsby-browser.js |  2 +-
 gatsby-ssr.js     | 16 ++++++++++++++++
 package.json      |  2 +-
 src/style.css     |  2 +-
 yarn.lock         |  8 ++++----
 5 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/gatsby-browser.js b/gatsby-browser.js
index f46c9eecc..d5d32476b 100644
--- a/gatsby-browser.js
+++ b/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');
 
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 59446d5e1..10f2c51db 100644
--- a/gatsby-ssr.js
+++ b/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;
diff --git a/package.json b/package.json
index 332f7929c..1ad129376 100644
--- a/package.json
+++ b/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",
diff --git a/src/style.css b/src/style.css
index ed7ebf084..869d1d517 100644
--- a/src/style.css
+++ b/src/style.css
@@ -39,7 +39,7 @@
 }
  
 html {
-  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-family: "Inter Variable", sans-serif
 }
 
 body {
diff --git a/yarn.lock b/yarn.lock
index c3f60edae..8f8d94316 100644
--- a/yarn.lock
+++ b/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"