# 🔤 Beam Fonts

Typography assets for the Beam Design System including **Source Sans Pro**, **Uni Neue**, and comprehensive internationalization support for Arabic, Hebrew, Japanese, and Chinese languages.

## 🔖 Table of Contents

1. [✨ Features](#features)
2. [💻 Installation](#installation)
3. [🛠️ Usage](#usage)
4. [🔤 Font Families](#font-families)
5. [📁 File Structure](#file-structure)

## Features

- **Source Sans Pro** - Primary typeface for body text and UI elements
- **Uni Neue** - Display typeface for headings and emphasis
- **Multi-language Support** - Noto Sans variants for Arabic, Hebrew, Japanese (JP), and Chinese (ZH)
- **Multiple Formats** - WOFF and WOFF2 for optimal browser support and performance
- **Framework Support** - Optimized imports for standard React and Next.js applications

## Installation

```bash
npm install @viasat/beam-fonts
```

```bash
yarn add @viasat/beam-fonts
```

```bash
pnpm add @viasat/beam-fonts
```

## Usage

### Standard React Application

Import the default font stylesheet in your application entry point:

```ts
import '@viasat/beam-fonts/styles.css';
```

### Next.js Application

Next.js requires fonts to be served from the `public` directory. Follow these steps:

#### 1. Copy Fonts to Public Directory

Add a `postinstall` script to your `package.json`:

```json
{
  "scripts": {
    "postinstall": "cp -R node_modules/@viasat/beam-fonts/assets public/fonts"
  }
}
```

Run the script:

```bash
npm run postinstall
```

#### 2. Import Next.js Font Styles

Use the Next.js-optimized stylesheet in your root layout:

```ts
// app/layout.tsx or pages/_app.tsx
import '@viasat/beam-fonts/styles.nextjs.css';
```

### Direct SCSS Import

If you need to customize font loading or work directly with SCSS:

```scss
@use '@viasat/beam-fonts/scss/source-sans';
@use '@viasat/beam-fonts/scss/uni-neue';

// Or import specific language fonts
@use '@viasat/beam-fonts/scss/noto-sans-arabic';
@use '@viasat/beam-fonts/scss/noto-sans-hebrew';
@use '@viasat/beam-fonts/scss/noto-sans-jp';
@use '@viasat/beam-fonts/scss/noto-sans-zh';
```

> 💡 **Note**: Font file paths are handled automatically using relative paths. Modern bundlers (Webpack, Vite, Rollup, etc.) will resolve the font files from `node_modules` and copy them to your output directory without any additional configuration.

## Font Families

### Source Sans Pro

Primary typeface for body text, UI components, and general content.

- **Weights:** Regular (400), Semi-Bold (600), Bold (700)
- **Styles:** Normal, Italic
- **Format:** WOFF, WOFF2

### Uni Neue

Display typeface for headings, titles, and emphasis.

- **Weights:** Book (300), Regular (400), Bold (700), Heavy (900)
- **Format:** WOFF, WOFF2

### Noto Sans (Multi-language)

Comprehensive language support for international applications.

**Variants:**

- **Noto Sans Arabic** - Full Arabic script support
- **Noto Sans Hebrew** - Full Hebrew script support
- **Noto Sans JP** - Japanese language support
- **Noto Sans SC** - Simplified Chinese support

**Weights:** Thin (100), ExtraLight (200), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800), Black (900)  
**Format:** TTF

## File Structure

```
@viasat/beam-fonts/
├── styles.css          # Standard usage
├── styles.nextjs.css   # Next.js optimized
├── scss/               # Individual SCSS modules
│   ├── source-sans.scss
│   ├── uni-neue.scss
│   ├── noto-sans-arabic.scss
│   ├── noto-sans-hebrew.scss
│   ├── noto-sans-jp.scss
│   └── noto-sans-zh.scss
└── assets/             # Font files
    ├── source-sans/
    ├── uni-neue/
    ├── noto-sans-arabic/
    ├── noto-sans-hebrew/
    ├── noto-sans-jp/
    └── noto-sans-zh/
```

## License

MIT © Viasat