🔤 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
2. 💻 Installation
3. 🛠️ Usage
4. 🔤 Font Families
5. 📁 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

npm install @viasat/beam-fonts

yarn add @viasat/beam-fonts

pnpm add @viasat/beam-fonts

Usage

Standard React Application

Import the default font stylesheet in your application entry point:

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:

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

Run the script:

npm run postinstall

2. Import Next.js Font Styles

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

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

@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