vercel · onemahmoudadel · Feb 12, 2024
diff --git 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 (
+    <html lang="en" className={GeistSans.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+##### Pages Router
+In ```pages/_app.js```:
+
+```js
+import { GeistSans } from "geist/font/sans";
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <main className={GeistSans.className}>
+      <Component {...pageProps} />
+    </main>
+  )
+}
+```
+##### 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 (
+    <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+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).