@folksam/ui-fonts

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

Installation

# npm
npm install @folksam/ui-fonts

# pnpm
pnpm add @folksam/ui-fonts

# yarn
yarn add @folksam/ui-fonts

Quick Start

Automatic Font Loading (Recommended)

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:

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

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

// 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 - Design system tokens
• @folksam/ui-components - React component library
• @folksam/ui-styles - Utility styles and CSS helpers