marsultor/public-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fonts): add Space Grotesk display font

Browse Source
This commit is contained in:
kbot
2026-07-06 20:05:25 -05:00
parent 4dd609179a
commit 7adc47d65f
2 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/globals.css
View File

@@ -38,6 +38,7 @@
--font-sans: "Fraunces", ui-sans-serif, system-ui, sans-serif; --font-sans: "Fraunces", ui-sans-serif, system-ui, sans-serif;
--font-serif: "IBM Plex Mono", ui-monospace, monospace; --font-serif: "IBM Plex Mono", ui-monospace, monospace;
--font-mono: "JetBrains Mono", ui-monospace, monospace; --font-mono: "JetBrains Mono", ui-monospace, monospace;
--font-display: "Space Grotesk";
/* Typography scale */ /* Typography scale */
--text-xs: 0.75rem; --text-xs--line-height: 1.2; --text-xs: 0.75rem; --text-xs--line-height: 1.2;

10
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from 'next' import type { Metadata } from 'next'
import { Fraunces, IBM_Plex_Mono, JetBrains_Mono } from 'next/font/google' import { Fraunces, IBM_Plex_Mono, JetBrains_Mono, Space_Grotesk } from 'next/font/google'
import { ThemeProvider } from '@wrksz/themes/next' import { ThemeProvider } from '@wrksz/themes/next'
import './globals.css' import './globals.css'
import 'katex/dist/katex.min.css' import 'katex/dist/katex.min.css'
@@ -17,6 +17,12 @@ const fraunces = Fraunces({
variable: '--font-fraunces', variable: '--font-fraunces',
}) })
const spaceGrotesk = Space_Grotesk({
subsets: ['latin'],
display: 'swap',
variable: '--font-space-grotesk',
})
const jetbrainsMono = JetBrains_Mono({ const jetbrainsMono = JetBrains_Mono({
subsets: ['latin'], subsets: ['latin'],
display: 'swap', display: 'swap',
@@ -49,7 +55,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en" className={`${fraunces.variable} ${jetbrainsMono.variable} ${plexMono.variable}`} data-scroll-behavior="smooth" suppressHydrationWarning> <html lang="en" className={`${fraunces.variable} ${spaceGrotesk.variable} ${jetbrainsMono.variable} ${plexMono.variable}`} data-scroll-behavior="smooth" suppressHydrationWarning>
<body className={`antialiased bg-canvas text-ink ${fraunces.className}`}> <body className={`antialiased bg-canvas text-ink ${fraunces.className}`}>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"