Clean up the font setup to make sure .font-sans works consistently

hasparus · hasparus · commit 4bea26b21b22 · 2025-04-21T18:54:17.000+02:00
diff --git a/src/app/conf/2023/layout.tsx b/src/app/conf/2023/layout.tsx
@@ -4,6 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
+import { OldFontsStyleTag } from "../../fonts/old-fonts"
 
 export const metadata = {
   description:
@@ -33,6 +34,7 @@ export default function ConfLayout({
   const hover = "#c026d3"
   return (
     <>
+      <OldFontsStyleTag />
       <style>{`
         .text-primary,
         .hover\\:text-primary:hover {
diff --git a/src/app/conf/2024/layout.tsx b/src/app/conf/2024/layout.tsx
@@ -4,6 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
+import { OldFontsStyleTag } from "../../fonts/old-fonts"
 
 export const metadata = {
   description:
@@ -30,6 +31,7 @@ export default function Layout({
 }): ReactElement {
   return (
     <>
+      <OldFontsStyleTag />
       <Header
         logo={
           <NextLink
diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx
@@ -4,7 +4,7 @@ import { Header } from "../_components/header"
 import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
-import { hostGrotesk } from "../../fonts"
+import { NewFontsStyleTag } from "../../fonts"
 
 export const metadata = {
   description:
@@ -31,15 +31,7 @@ export default function Layout({
 }): ReactElement {
   return (
     <>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: /* css */ `
-html.fonts {
-  --font-sans: ${hostGrotesk.style.fontFamily};
-  font-family: var(--font-sans);
-}`,
-        }}
-      />
+      <NewFontsStyleTag />
       <Header
         logo={
           <NextLink
diff --git a/src/app/fonts/index.tsx b/src/app/fonts/index.tsx
@@ -0,0 +1,18 @@
+import localFont from "next/font/local"
+
+export const hostGrotesk = localFont({
+  src: [
+    { path: "./HostGrotesk-VariableFont_wght.woff2" },
+    { path: "./HostGrotesk-Italic-VariableFont_wght.woff2", style: "italic" },
+  ],
+  weight: "300 800",
+})
+
+const newFontsStyles = /* css */ `
+html {
+  --font-sans: ${hostGrotesk.style.fontFamily};
+}`
+
+export const NewFontsStyleTag = () => {
+  return <style dangerouslySetInnerHTML={{ __html: newFontsStyles }} />
+}
diff --git a/src/app/fonts/old-fonts.tsx b/src/app/fonts/old-fonts.tsx
@@ -0,0 +1,14 @@
+import { Roboto_Flex } from "next/font/google"
+
+export const robotoFlex = Roboto_Flex({
+  subsets: ["latin"],
+})
+
+const oldFontsStyles = /* css */ `
+html {
+  --font-sans: ${robotoFlex.style.fontFamily};
+}`
+
+export const OldFontsStyleTag = () => {
+  return <style dangerouslySetInnerHTML={{ __html: oldFontsStyles }} />
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,13 +1,8 @@
 import { ReactElement, ReactNode } from "react"
 import { Metadata } from "next"
-import { Roboto_Flex } from "next/font/google"
 import GoogleAnalytics from "@/app/ga"
 import "../globals.css"
 
-const font = Roboto_Flex({
-  subsets: ["latin"],
-})
-
 export const metadata: Metadata = {
   twitter: {
     site: "@graphql",
@@ -28,8 +23,7 @@ export default function RootLayout({
   children: ReactNode
 }): ReactElement {
   return (
-    // eslint-disable-next-line tailwindcss/no-custom-classname
-    <html lang="en" className={`fonts scroll-smooth ${font.className}`}>
+    <html lang="en" className="scroll-smooth">
       <head>
         <style>{`html { scroll-padding-top: 5rem }`}</style>
       </head>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,5 +1,6 @@
 import type { Config } from "tailwindcss"
 import typography from "@tailwindcss/typography"
+import { fontFamily } from "tailwindcss/defaultTheme"
 
 const config: Config = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./theme.config.tsx"],
@@ -9,6 +10,12 @@ const config: Config = {
       padding: "1rem",
     },
     extend: {
+      fontFamily: {
+        sans: [
+          `var(--font-sans, ${fontFamily.sans.slice(0, 3).join(", ")})`,
+          ...fontFamily.sans,
+        ],
+      },
       colors: {
         primary: "#e10098",
         "conf-black": "#0e031c",
