# @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
