@arma-events/web-fonts

Web Fonts for arma.events

This package includes all web fonts used in arma.events and related projects.

Each font is...

• ...segmented in multiple unicode ranges so that a browser only needs to download the font resource needed for the displayed text content
• ...accompanied by a fallback font that should be displayed while the resources are loading. It is a font that is locally available on most systems and is adjusted to match the size of the target font as closely as possible to reduce layout shift.

Installation

npm i @arma-events/web-fonts

Usage

Simply include the css file, which includes font-faces for all font as well as their fallback fonts:

@import '@arma-events/web-fonts/dist/index.css';

/* Use the font */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Raleway', 'Raleway Fallback', sans-serif; /* Make sure to include the fallback font to reduce layout shift */
}

Advanced usage

When you are using SASS (or SCSS) you can also import the index.scss, which allows configuration which font families, Unicode ranges and styles should be included as well as from where the font files are loaded.

// NOTE: omit the variable entirely to keep the default value

@use '@arma-events/web-fonts/dist/index.scss' with (
  // no trailing slash;
  // would attempt to load '~my/font/files/Raleway/italic.latin.woff2'
  //                        ^^^^^^^^^^^^^^ ^^^^^^^ ^^^^^^ ^^^^^
  //                        Your Path      Family  Style  Range
  $base-path: '~my/font/files',

  // only include Source Sans 3 and Raleway in the italic-style
  // and latin as well as latin-ext ranges
  $families: ('Source Sans 3', 'Raleway'),
  $styles: ('italic'),
  $ranges: ('latin', 'latin-ext'),
);

Variables

[!IMPORTANT] All "Allowed Values" below might be outdated. Check the dist/_build_info.scss file in your package directory for the correct values.

$base-path

Name	Value
Description	Base path of woff files to load (without a trailing slash)
Default Value	@arma-events/web-fonts/dist/woff2
Type	String
Allowed Values	-

$families

Name	Value
Description	Font families to include
Default Value	All families
Type	List
Allowed Values	one or multiple of Source Sans 3, Source Code Pro, Raleway

$styles

Name	Value
Description	Font styles to include
Default Value	All styles
Type	List
Allowed Values	one or multiple of normal, italic

$ranges

Name	Value
Description	Unicode ranges to include
Default Value	All built ranges
Type	List
Allowed Values	one or multiple of cyrillic-ext, cyrillic, greek-ext, greek, vietnamese, latin-ext, latin