# fontline
A powerful and flexible font management system for Next.js applications.
[](https://badge.fury.io/js/fontline)
[](https://opensource.org/licenses/MIT)
## Features
- 🎯 Type-safe font configuration
- 🔄 Automatic font loading and management
- 💾 Persistent font preferences
- 🎨 CSS variables integration
- ⚛️ React hooks for font management
- 📦 Zero-config integration with Next.js
- 🌓 Smooth font transitions
- 🔍 SSR support
## Installation
```bash
# npm
npm install fontline
# pnpm
pnpm add fontline
# yarn
yarn add fontline
```
## Quick Start
1. Load your fonts using Next.js font loaders:
```typescript
// app/fonts.ts
import { Inter, Roboto } from 'next/font/google'
import type { FontProviderProps } from 'fontline'
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
})
const roboto = Roboto({
subsets: ['latin'],
weight: ['400', '700'],
variable: '--font-roboto',
})
export const fontConfig: FontProviderProps = {
fonts: {
inter: {
className: inter.className,
style: { fontFamily: inter.style.fontFamily }
},
roboto: {
className: roboto.className,
style: { fontFamily: roboto.style.fontFamily }
}
},
defaultFont: 'inter',
// Optional: Custom class mappings
values: {
inter: 'my-custom-inter',
roboto: 'my-custom-roboto'
},
}
```
2. Set up the provider in your layout:
```typescript
// app/layout.tsx
import { FontProvider } from 'fontline'
import { fontConfig } from './fonts'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
3. Use the hook in your components:
```typescript
// components/font-selector.tsx
import { useFont } from 'fontline'
export function FontSelector() {
const { font, setFont, fonts } = useFont()
return (
)
}
```
## API Reference
### FontProvider
The main provider component for font management.
```typescript
interface FontProviderProps {
fonts: Record;
defaultFont: string;
forcedFont?: string;
storageKey?: string;
disableTransitionOnChange?: boolean;
values?: FontValues;
nonce?: string;
}
```
### useFont Hook
Hook for accessing font state and controls.
```typescript
interface UseFontProps {
font: string;
setFont: React.Dispatch>;
fonts: string[];
forcedFont?: string;
resolvedFont: string;
}
const { font, setFont, fonts, resolvedFont } = useFont()
```
## Configuration Options
- `fonts`: Record of available fonts with their configurations
- `defaultFont`: Initial font to use
- `forcedFont`: Override user selection (optional)
- `storageKey`: LocalStorage key for persistence (default: 'font')
- `disableTransitionOnChange`: Disable transitions when changing fonts
- `values`: Custom class name mappings
- `nonce`: CSP nonce for inline scripts
## Advanced Usage
### Custom Font Classes
```typescript
const fontConfig: FontProviderProps = {
fonts: {
inter: {
className: 'font-inter',
style: { fontFamily: 'Inter' }
}
},
values: {
inter: 'my-custom-class'
}
}
```
### Forced Font
```typescript
{children}
```
### Disable Transitions
```typescript
{children}
```
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- IE 11 (basic support)
## Contributing
Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
## License
[MIT](LICENSE.md)