# @octaviaflow/fonts

> Octaviaflow Design System typeface family

## Overview

The `@octaviaflow/fonts` package provides the Octaviaflow Design System typeface family, including:

- **Lufga** - Modern geometric sans-serif (18 styles: Thin to Black, with italics)
- **RTL United Text** - Right-to-left language support (6 styles: Light to Bold, with italics)
- **JetBrains Mono** - Monospace font for code (16 styles: Thin to Extra Bold, with italics)

## Installation

```bash
npm install @octaviaflow/fonts
```

Or with Bun:

```bash
bun add @octaviaflow/fonts
```

## Usage

### CSS Import (Recommended)

Import the compiled CSS file in your application:

```css
@import '@octaviaflow/fonts/css/octaviaflow-fonts.css';
```

Or use the minified version:

```css
@import '@octaviaflow/fonts/css/octaviaflow-fonts.min.css';
```

### SCSS Import

For more control, import the SCSS files:

```scss
// Import all fonts
@import '@octaviaflow/fonts/scss/octaviaflow-fonts';

// Or import individually
@import '@octaviaflow/fonts/scss/lufga';
@import '@octaviaflow/fonts/scss/rtl-united-text';
@import '@octaviaflow/fonts/scss/jetbrains-mono';
```

### Custom Font Path

If you need to customize the font file path:

```scss
$font-prefix: './custom/path/to/fonts';
@import '@octaviaflow/fonts/scss/octaviaflow-fonts';
```

### Font Family Usage

Once imported, use the fonts in your CSS:

```css
/* Lufga - Primary typeface */
body {
  font-family: 'Lufga', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* RTL United Text - For RTL languages */
[dir='rtl'] {
  font-family: 'RTL United Text', 'Lufga', sans-serif;
}

/* JetBrains Mono - For code */
code, pre, .code {
  font-family: 'JetBrains Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
}
```

## Font Weights

### Lufga
- **100** - Thin
- **200** - Extra Light
- **300** - Light
- **400** - Regular (default)
- **500** - Medium
- **600** - Semi Bold
- **700** - Bold
- **800** - Extra Bold
- **900** - Black

All weights include italic variants.

### RTL United Text
- **300** - Light
- **400** - Regular (default)
- **700** - Bold

All weights include italic variants.

### JetBrains Mono
- **100** - Thin
- **200** - Extra Light
- **300** - Light
- **400** - Regular (default)
- **500** - Medium
- **600** - Semi Bold
- **700** - Bold
- **800** - Extra Bold

All weights include italic variants.

## Storybook Integration

To use Octaviaflow fonts globally in Storybook, add to `.storybook/preview-head.html`:

```html
<link rel="stylesheet" href="../node_modules/@octaviaflow/fonts/css/octaviaflow-fonts.css">
```

Or import in `.storybook/preview.js`:

```javascript
import '@octaviaflow/fonts/css/octaviaflow-fonts.css';
```

## Next.js Integration

In your `_app.tsx` or `layout.tsx`:

```tsx
import '@octaviaflow/fonts/css/octaviaflow-fonts.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

## React Integration

In your main entry file (e.g., `index.tsx`):

```tsx
import '@octaviaflow/fonts/css/octaviaflow-fonts.css';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
```

## File Structure

```
@octaviaflow/fonts/
├── css/
│   ├── octaviaflow-fonts.css
│   └── octaviaflow-fonts.min.css
├── scss/
│   ├── _lufga.scss
│   ├── _rtl-united-text.scss
│   └── octaviaflow-fonts.scss
├── fonts/
│   ├── lufga/
│   │   └── *.woff
│   └── rtl-united-text/
│       └── *.ttf
└── package.json
```

## Performance Tips

1. **Use CSS import** - Precompiled CSS is faster than SCSS compilation
2. **Minified version** - Use `.min.css` in production
3. **Subset fonts** - Only import the fonts you need (Lufga, RTL United Text, or JetBrains Mono)
4. **font-display: swap** - All fonts use `font-display: swap` for better performance

## License

Apache-2.0

## Support

For issues and questions, visit: https://github.com/octaviaflow-design-system/issues
