open-index/open-npm huggingface dataset:
npm package: @folksam/ui-fonts
Description: Professional font system for Folksam applications providing optimized font loading, CSS injection, and comprehensive TypeScript support.
Latest version: 0.1.2

# @folksam/ui-fonts

Professional font system for Folksam applications providing optimized font loading, CSS injection, and comprehensive TypeScript support.

## Installation

```bash
# npm
npm install @folksam/ui-fonts

# pnpm
pnpm add @folksam/ui-fonts

# yarn
yarn add @folksam/ui-fonts
```

## Quick Start

### Automatic Font Loading (Recommended)

```tsx
import { globalCssFontFaces } from '@folksam/ui-fonts';

// Initialize font faces (call once in your app entry point)
globalCssFontFaces();
```

### Manual Font Import

For advanced use cases where you need direct access to font files:

```tsx
// Import specific font variants
import textRegular from '@folksam/ui-fonts/assets/FolksamSans-TextRegular.woff2';
import textMedium from '@folksam/ui-fonts/assets/FolksamSans-TextMedium.woff2';
import textBold from '@folksam/ui-fonts/assets/FolksamSans-TextBold.woff2';
import displayHeavy from '@folksam/ui-fonts/assets/FolksamSans-DisplayHeavy.woff2';

// Italic variants
import textRegularItalic from '@folksam/ui-fonts/assets/FolksamSans-TextRegularItalic.woff2';
import textMediumItalic from '@folksam/ui-fonts/assets/FolksamSans-TextMediumItalic.woff2';
import textBoldItalic from '@folksam/ui-fonts/assets/FolksamSans-TextBoldItalic.woff2';
```

## Framework Integration

### Vite

```tsx
// main.tsx or App.tsx
import { globalFontFaces } from '@folksam/ui-fonts';

globalFontFaces();

function App() {
  return (
    <div style={{ fontFamily: 'FolksamSans, sans-serif' }}>
      <h1>Your Application</h1>
    </div>
  );
}
```

### Next.js

```tsx
// pages/_app.tsx or app/layout.tsx
import { globalFontFaces } from '@folksam/ui-fonts';

// Initialize fonts once
globalFontFaces();

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

## Related Packages

- [`@folksam/ui-design-tokens`](../ui-design-tokens) - Design system tokens
- [`@folksam/ui-components`](../ui-components) - React component library
- [`@folksam/ui-styles`](../ui-styles) - Utility styles and CSS helpers