diff --git a/readme.md b/readme.md index 4540506d..6f0aa6d5 100644 --- a/readme.md +++ b/readme.md @@ -8,12 +8,120 @@ Geist Sans is a sans-serif typeface designed for legibility and simplicity. It i Geist Mono is a monospaced typeface that has been crafted to be the perfect partner to Geist Sans. It is designed to be used in code editors, diagrams, terminals, and other textbased interfaces where code is represented. -### Installation +### Download Download the latest release from the [releases page](https://github.com/vercel/geist-font/releases/latest) and install the fonts on your system. * [Download Geist Sans](https://github.com/vercel/geist-font/releases/download/1.1.0/Geist.zip) * [Download Geist Mono](https://github.com/vercel/geist-font/releases/download/1.1.0/Geist.Mono.zip) +### Installation +#### Use in Next.js +GeistSans is exported from geist/font/sans, and GeistMono can be found in geist/font/mono. Both are NextFontWithVariable instances. You can learn more by [reading the next/font docs.](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) +```sh +npm install geist +``` + +##### App Router +In ```app/layout.js```: + +```js +import { GeistSans } from "geist/font/sans"; + +export default function RootLayout({ + children, +}) { + return ( + + {children} + + ) +} +``` + +##### Pages Router +In ```pages/_app.js```: + +```js +import { GeistSans } from "geist/font/sans"; + +export default function MyApp({ Component, pageProps }) { + return ( +
+ +
+ ) +} +``` +##### With Tailwind CSS +```GeistSans``` and ```GeistMono``` can be used through a CSS variable. + +- ```GeistSans```: ```--font-geist-sans``` +- ```GeistMono```: ```--font-geist-mono``` + +In ```app/layout.js```: +```js +import { GeistSans } from 'geist/font/sans' +import { GeistMono } from 'geist/font/mono' + +export default function RootLayout({ + children, +}) { + return ( + + {children} + + ) +} +``` +Then in ```tailwind.config.js```: + +```js +module.exports = { + theme: { + extend: { + fontFamily: { + sans: ['var(--font-geist-sans)'], + mono: ['var(--font-geist-mono)'], + }, + }, + }, +} +``` + +#### Use in Astro + +You can download the font and add it manually to your project with @font-face . You can learn more by +[reading MDN’s web fonts guide.](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) +Another choice Generate CSS for your font with [Font Squirrel’s Webfont Generator.](https://www.fontsquirrel.com/tools/webfont-generator) better one Using [fontsource](https://fontsource.org/) + +##### Using Fontsource + +```sh +npm install @fontsource/geist-sans +``` +```sh +npm install @fontsource/geist-mono +``` + +In ```src/layouts/MainLayout.astro```: +```js +import '@fontsource/geist-mono'; +import '@fontsource/geist-sans'; +``` + +In ```src/styles/global.css```: +```css +body { + font-family: 'Geist Sans', sans-serif; +} + +/* or */ + +body { + font-family: 'Geist Mono'; +} +``` + ### License The Geist font family is free and open sourced under the [SIL Open Font License](./LICENSE.TXT).