feat: change fonts loading

gatsby-config.ts

@@ -68,6 +68,22 @@ const config: GatsbyConfig = {
         extensions: ["css", "html", "js", "svg"],
       },
     },
+    {
+      resolve: `gatsby-omni-font-loader`,
+      options: {
+        enableListener: true,
+        preconnect: [
+          `https://fonts.googleapis.com`,
+          `https://fonts.gstatic.com`,
+        ],
+        web: [
+          {
+            name: `Reddit Sans Condensed`,
+            file: `https://fonts.googleapis.com/css2?family=Reddit+Sans+Condensed:[email protected]&display=swap`,
+          },
+        ],
+      },
+    },
     {
       resolve: "gatsby-plugin-mdx",
       options: {

package.json

@@ -39,6 +39,7 @@
     "autoprefixer": "10.4.20",
     "dotenv": "16.4.5",
     "gatsby": "5.13.7",
+    "gatsby-omni-font-loader": "2.0.2",
     "gatsby-plugin-algolia": "1.0.3",
     "gatsby-plugin-canonical-urls": "5.13.1",
     "gatsby-plugin-google-gtag": "5.13.1",
@@ -59,6 +60,7 @@
     "postcss": "8.4.41",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-helmet": "6.1.0",
     "react-infinite-scroll-component": "6.1.0",
     "react-instantsearch": "7.13.1",
     "tailwindcss": "3.4.10"

src/styles/global.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Reddit+Sans+Condensed:[email protected]&display=swap");
+/* @import url("https://fonts.googleapis.com/css2?family=Reddit+Sans+Condensed:[email protected]&display=swap"); */
 @font-face {
   font-family: "Kally Dreams";
   src: url("/fonts/Kally_dreams.otf") format("opentype");

yarn.lock

@@ -7651,6 +7651,11 @@ gatsby-link@^5.13.1:
     gatsby-page-utils "^3.13.1"
     prop-types "^15.8.1"
 
+[email protected]:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/gatsby-omni-font-loader/-/gatsby-omni-font-loader-2.0.2.tgz#821961da51fd163ea6f93ad5fecd174f7612715d"
+  integrity sha512-Bp6truuUwbDRHWtL+u/lUvMsAT5ipO45LNJgqNdOzTUGw3GB7dw8k4RHDtpxwFTgacdk25kH8aOYfh460jJYCQ==
+
 gatsby-page-utils@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/gatsby-page-utils/-/gatsby-page-utils-3.13.1.tgz#bd159e9f21ce48f170064682b9a8d087ce49abf4"
@@ -12942,7 +12947,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.1, prop-types@^15.8.1:
+prop-types@^15.6.1, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -13170,6 +13175,21 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.1.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
+[email protected]:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 [email protected]:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"
@@ -13231,6 +13251,11 @@ [email protected]:
     loose-envify "^1.1.0"
     neo-async "^2.6.1"
 
+react-side-effect@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
+  integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"