Skip to content

Commit 81d8dd5

Browse files
andre347andre347
committed
fix font for cmdk
1 parent 637d312 commit 81d8dd5

File tree

4 files changed

+203
-188
lines changed

4 files changed

+203
-188
lines changed

‎components/CommandBar.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const searchStyle = {
2121
border: "none",
2222
background: "var(--background)",
2323
color: "var(--foreground)",
24+
fontFamily: "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
2425
};
2526

2627
const animatorStyle = {
@@ -31,6 +32,7 @@ const animatorStyle = {
3132
borderRadius: "8px",
3233
overflow: "hidden",
3334
boxShadow: "var(--shadow)",
35+
fontFamily: "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
3436
};
3537

3638
const groupNameStyle = {

‎css/tailwind.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
@font-face {
2+
font-family: 'Geist Sans';
3+
src: url('../node_modules/geist/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2');
4+
font-weight: 100 900;
5+
font-style: normal;
6+
font-display: swap;
7+
}
8+
19
@tailwind base;
210
@tailwind components;
311
@tailwind utilities;
@@ -11,4 +19,7 @@
1119
--shadow: 0px 6px 20px rgb(0 0 0 / 20%);
1220

1321
--unit: 8px;
14-
}
22+
23+
/* Geist Sans font - fallback if CSS variable not available */
24+
--font-geist-sans: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
25+
}

‎pages/_app.tsx‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -84,55 +84,57 @@ function App({ Component, pageProps }) {
8484

8585
return (
8686
<PostHogProvider client={posthog}>
87-
<CommandBar>
88-
<div className={`flex min-h-screen flex-col font-sans ${geistSans.variable}`}>
89-
<div className="antialiased z-10">
90-
<Head>
91-
<link
92-
rel="apple-touch-icon"
93-
sizes="180x180"
94-
href="/apple-touch-icon.png"
95-
/>
96-
<link
97-
rel="icon"
98-
type="image/png"
99-
sizes="32x32"
100-
href="/favicon-32x32.png"
101-
/>
102-
<link
103-
rel="icon"
104-
type="image/png"
105-
sizes="16x16"
106-
href="/favicon-16x16.png"
107-
/>
108-
<link rel="manifest" href="/site.webmanifest" />
109-
<meta name="theme-color" content="#ffffff" />
110-
<meta content={meta.description} name="description" />
111-
<meta content={meta.keywords.join(", ")} name="keywords" />
112-
<meta property="og:type" content="website" />
113-
<meta property="og:site_name" content="Andre de Vries" />
114-
<meta property="og:description" content={meta.description} />
115-
<meta property="og:title" content={meta.title} />
116-
<title>{meta.title}</title>
117-
</Head>
118-
<Section>
119-
<Header />
120-
</Section>
121-
<Section>
122-
<Fragment>
123-
<div className="py-28">
124-
<Component {...pageProps} />
125-
</div>
126-
</Fragment>
127-
</Section>
128-
<Section>
129-
<Footer />
130-
</Section>
87+
<div className={geistSans.variable}>
88+
<CommandBar>
89+
<div className={`flex min-h-screen flex-col font-sans`}>
90+
<div className="antialiased z-10">
91+
<Head>
92+
<link
93+
rel="apple-touch-icon"
94+
sizes="180x180"
95+
href="/apple-touch-icon.png"
96+
/>
97+
<link
98+
rel="icon"
99+
type="image/png"
100+
sizes="32x32"
101+
href="/favicon-32x32.png"
102+
/>
103+
<link
104+
rel="icon"
105+
type="image/png"
106+
sizes="16x16"
107+
href="/favicon-16x16.png"
108+
/>
109+
<link rel="manifest" href="/site.webmanifest" />
110+
<meta name="theme-color" content="#ffffff" />
111+
<meta content={meta.description} name="description" />
112+
<meta content={meta.keywords.join(", ")} name="keywords" />
113+
<meta property="og:type" content="website" />
114+
<meta property="og:site_name" content="Andre de Vries" />
115+
<meta property="og:description" content={meta.description} />
116+
<meta property="og:title" content={meta.title} />
117+
<title>{meta.title}</title>
118+
</Head>
119+
<Section>
120+
<Header />
121+
</Section>
122+
<Section>
123+
<Fragment>
124+
<div className="py-28">
125+
<Component {...pageProps} />
126+
</div>
127+
</Fragment>
128+
</Section>
129+
<Section>
130+
<Footer />
131+
</Section>
132+
</div>
133+
<Background />
131134
</div>
132-
<Background />
133-
</div>
134-
<Analytics />
135-
</CommandBar>
135+
<Analytics />
136+
</CommandBar>
137+
</div>
136138
</PostHogProvider>
137139
);
138140
}

0 commit comments

Comments
 (0)