Riverty Design System: Fonts

Riverty, your flexible Payment Companion. 25+ million users, 1+ billion secure transactions.

Riverty Design System: a design and development toolkit tailor-made for Riverty teams and collaborators.

→ designsystem.riverty.com

Contributing

We welcome contributions to the Fonts package! This package manages web fonts and @font-face definitions.

Development Setup

cd packages/fonts
npm install
npm run build  # Process fonts and generate CSS

Structure

src/
├── fonts/              # Font files (woff2, woff, etc.)
└── font-faces.scss     # @font-face definitions

Font Configuration

Font metadata is defined in fonts.json:

{
  "fonts": [
    {
      "family": "Riverty Sans",
      "weight": 400,
      "style": "normal",
      "files": {
        "woff2": "riverty-sans-regular.woff2",
        "woff": "riverty-sans-regular.woff"
      }
    }
  ]
}

Working with Fonts

1. Adding new font files:

   • Place font files in src/fonts/
   • Update fonts.json with metadata
   • Run npm run build

2. Testing font loading:

   npm run build
   cd ../website
   npm run start

3. Verify @font-face declarations:

   • Check generated files in lib/
   • Test loading in different browsers
   • Verify fallback behavior

Best Practices

• Maintain font file integrity (don't modify font files directly)
• Update font metadata accurately
• Include multiple formats (woff2, woff) for browser support
• Optimize font files for web (subset if possible)
• Test @font-face declarations
• Verify CDN compatibility
• Document font licensing
• Test font loading performance

Font Formats

Supported formats (in order of preference):

1. WOFF2 - Modern format, best compression
2. WOFF - Fallback for older browsers

Testing

# Build fonts
npm run build

# Verify artifacts (if available)
npm run verify:artifacts

Useful Commands

• npm run build - Process fonts and generate CSS
• npm run verify:artifacts - Verify build outputs

For complete contribution guidelines, see CONTRIBUTING.md in the repository root.