geist - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

package.json

		{
		"name": "geist",
		"version": "0.1.6",
		"version": "0.1.7",
		"description": "Geist is a new font family for Vercel, created by Vercel in collaboration with Basement Studio.",
		@@ -5,0 +5,0 @@ "main": "src/font.js",

README.md

		@@ -23,3 +23,3 @@ ![](.images/hero.png)
		```jsx
		import { sansFont } from "geist/font";
		import { GeistSans } from "geist/font";

		@@ -32,3 +32,3 @@ export default function RootLayout({
		return (
		<html lang="en" className={sansFont.className}>
		<html lang="en" className={GeistSans.className}>
		<body>{children}</body>
		@@ -45,7 +45,7 @@ </html>
		```jsx
		import { sansFont } from "geist/font";
		import { GeistSans } from "geist/font";

		export default function MyApp({ Component, pageProps }) {
		return (
		<main className={sansFont.className}>
		<main className={GeistSans.className}>
		<Component {...pageProps} />
		@@ -57,2 +57,76 @@ </main>

		#### With Tailwind CSS

		`GeistSans` and `GeistMono` can be used through a CSS variable.

		- `GeistSans`: `--font-geist-sans`
		- `GeistMono`: `--font-geist-mono`

		##### App Router Example

		In your `app/layout.js`:


		```jsx
		import { GeistSans, GeistMono } from 'geist/font'

		export default function RootLayout({
		children,
		}: {
		children: React.ReactNode
		}) {
		return (
		<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
		<body>{children}</body>
		</html>
		)
		}
		```

		Then in your `tailwind.config.js`:

		```javascript
		module.exports = {
		theme: {
		extend: {
		fontFamily: {
		sans: ['var(--font-geist-sans)'],
		mono: ['var(--font-geist-mono)'],
		},
		},
		},
		}
		```

		##### Pages Router Example

		In your `pages/_app.js`:

		```jsx
		import { GeistSans, GeistMono } from 'geist/font'

		export default function MyApp({ Component, pageProps }) {
		return (
		<main className={`${GeistSans.variable} ${GeistMono.variable}`}>
		<Component {...pageProps} />
		</main>
		)
		}
		```

		Then in your `tailwind.config.js`:

		```javascript
		module.exports = {
		theme: {
		extend: {
		fontFamily: {
		sans: ['var(--font-geist-sans)'],
		mono: ['var(--font-geist-mono)'],
		},
		},
		},
		}
		```

		### License
		@@ -59,0 +133,0 @@ The Geist font family is free and open sourced under the [SIL Open Font License](./LICENSE.TXT).

src/font.js

		@@ -51,2 +51,3 @@ import localFont from "@next/font/local";
		],
		variable: "--font-geist-sans",
		});
		@@ -102,2 +103,3 @@
		],
		variable: "--font-geist-mono",
		});

geist - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics