@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

npm install @octaviaflow/fonts

Or with Bun:

bun add @octaviaflow/fonts

Usage

CSS Import (Recommended)

Import the compiled CSS file in your application:

@import "@octaviaflow/fonts/css/octaviaflow-fonts.css";

Or use the minified version:

@import "@octaviaflow/fonts/css/octaviaflow-fonts.min.css";

SCSS Import

For more control, import the SCSS files:

// 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:

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

Font Family Usage

Once imported, use the fonts in your 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:

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

Or import in .storybook/preview.js:

import "@octaviaflow/fonts/css/octaviaflow-fonts.css";

Next.js Integration

In your _app.tsx or layout.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):

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