@synergy-design-system/fonts

This package provides the SICK Intl font family required for Synergy 3.0 and later versions. The font is distributed with pre-built CSS files for easy integration into any project.

Installation

Install the fonts package as a dependency:

npm install --save @synergy-design-system/fonts

Usage

Basic Usage

Import the complete font family with all weights:

// The default export will load SICK Intl automatically.
import "@synergy-design-system/fonts";

// You may also use a direct import instead.
// Use this if your bundler does not understand JavaScript module syntax
import "@synergy-design-system/fonts/src/sick-intl/font.css";

This will load both Regular (400) and Semi Bold (600) font weights with proper @font-face declarations.

CSS Import

If you prefer CSS imports, you can use:

@import "@synergy-design-system/fonts/src/sick-intl/font.css";

Inline Base64 Version (Self-Contained)

For applications that need fully self-contained CSS without external font file dependencies, use the automatically generated inline version:

import "@synergy-design-system/fonts/sick-intl-inline.css";

This version includes the font files as base64-encoded data URIs directly in the CSS, eliminating the need for separate font file hosting. Note: This increases CSS file size but removes external dependencies.

Framework Examples

Vite

// main.tsx
import "@synergy-design-system/fonts";

Angular

// In angular.json
"styles": [
  "@synergy-design-system/fonts/src/sick-intl/font.css",
]

CSS Usage

After importing the fonts, use the SICK Intl font family in your CSS:

body {
  font-family:
    "SICK Intl",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

.heading {
  font-family: "SICK Intl";
  font-weight: 600; /* Semi Bold */
}

.body-text {
  font-family: "SICK Intl";
  font-weight: 400; /* Regular */
}

Available Font Weights

• 400 (Regular): Used for body text and standard content
• 600 (Semi Bold): Used for headings, emphasized text, and UI elements

File Structure

dist/
├── sick-intl-inline.css     # Base64 inline version (git ignored)
src/
└── sick-intl/
    ├── font.css                # Default font face definitions
    ├── SICKIntl-Regular.woff2  # Regular font
    └── SICKIntl-SemiBold.woff2 # Semibold font

Browser Support

The font files are provided in WOFF2 format, which is supported by:

• Chrome 36+
• Firefox 39+
• Safari 12+
• Edge 14+

For older browser support, consider using the CDN version or hosting additional font formats.

CDN Alternative

If you prefer not to bundle fonts with your application, you can load them from the SICK CDN:

@font-face {
  font-display: swap;
  font-family: "SICK Intl";
  font-style: normal;
  font-weight: 400;
  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Regular.woff2")
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "SICK Intl";
  font-style: normal;
  font-weight: 600;
  src: url("https://www.sick.com/media/fonts/sickintl-v2/SICKIntl-Semibold.woff2")
    format("woff2");
}

Performance Considerations

• Standard version: Loads font files separately, better for caching
• Inline version: Self-contained but larger CSS file size
• CDN version: Fastest initial load but requires network connectivity

Development

This package uses PostCSS to generate multiple font distribution formats:

• Standard CSS with external font files
• Base64 inline CSS for self-contained usage

The inline version is automatically generated during build and includes the font files as data URIs.

Steps for updating SICK Intl

When updating SICK Intl to the latest version, please make sure to:

• Use the Font Squirrel Webfont Generator
• Use the export settings in the export-configs folder of this package.