Add Geist font

[programmersd21]

Changes:

• Added the Geist font

[hunvreus]

I had Geist and Geist Mono initially, but dropped them as I was having performance issues (because I was using Google Fonts).

Can you rework this against the development branch and include Geist Mono as well?

A few comments as well:

1. Try and strictly follow the guidelines from Tailwind for custom fonts: https://tailwindcss.com/docs/font-family#customizing-your-theme
2. Do not use !important.
3. You probably want to use this approach to overriding the font-sans and font-serif font families:

@theme {
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

[programmersd21]

I had Geist and Geist Mono initially, but dropped them as I was having performance issues (because I was using Google Fonts).

Can you rework this against the development branch and include Geist Mono as well?

A few comments as well:

1. Try and strictly follow the guidelines from Tailwind for custom fonts: https://tailwindcss.com/docs/font-family#customizing-your-theme
2. Do not use !important.
3. You probably want to use this approach to overriding the font-sans and font-serif font families:

@theme {
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

hi, @hunvreus, i apologize for the huge delay, i was actually busy with some other projects, but as i have seen your reply now, here's what i think you might wanna integrate:

1. For the CSS:

@layer base {
:root {
--font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo,
Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

body {
font-family: var(--font-sans);
}

code, pre, kbd, samp {
font-family: var(--font-mono);
}
}

and 2. Tailwind Config in tailwind.config.js:

import { defineConfig } from 'tailwindcss'

export default defineConfig({
theme: {
extend: {
fontFamily: {
sans: 'var(--font-sans)',
mono: 'var(--font-mono)',
},
},
},
})

✅ This will work!

[programmersd21]

or wait, for performance we can try self-hosted fonts, as in this example:

@font-face {
font-family: 'Geist';
src: url('/fonts/Geist.woff2') format('woff2'),
url('/fonts/Geist.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Geist Mono';
src: url('/fonts/GeistMono.woff2') format('woff2'),
url('/fonts/GeistMono.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

:root {
--font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo,
Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

hope this helps u in production 💖 glad to help btw 😁