diff --git a/README.md b/README.md index f698481..2bca691 100644 --- a/README.md +++ b/README.md @@ -30,3 +30,28 @@ 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](https://sass-lang.com/) (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. + + +```scss +// only include Source Sans 3 and Source Code Pro in the italic-style +// and latin as well as latin-ext +@use '@arma-events/web-fonts/dist/index.scss' with ( + $families: ('Source Sans 3', 'Source Code Pro'), + $styles: ('italic'), + $ranges: ('latin', 'latin-ext'), // omit $ranges entirely to include all ranges +); +``` + +> [!IMPORTANT] +> The "possible values" column in the table below might be outdated. Check the `dist/_build_info.scss` file in your package directory for the correct values. + +| Variable | Description | Possible Values | +| :----------- | :------------------------------ | :----------------------------------------------------------------------------------- | +| `$base-path` | Base path of woff files to load | - | +| `$families` | Families to include | `Source Sans 3`, `Source Code Pro`, `Raleway` | +| `$styles` | Styles to include | `normal`, `italic` | +| `$ranges` | Ranges to include | `cyrillic-ext`, `cyrillic`, `greek-ext`, `greek`, `vietnamese`, `latin-ext`, `latin` | diff --git a/build/index.js b/build/index.js index 373af76..4ee80e5 100644 --- a/build/index.js +++ b/build/index.js @@ -49,12 +49,12 @@ console.log(''); await writeFile( path, [ - `@use 'sass:map';`, `$families: ${arrayToScssList(Object.keys(CONFIGS))};`, `$styles: ${arrayToScssList(STYLES)};`, + `$ranges: ${arrayToScssList(Object.keys(UNICODE_RANGES))};`, + '', `$weights: ${objToScssMap(Object.fromEntries(Object.entries(CONFIGS).map(([k, v]) => [k, v.weight])))};`, `$unicode-ranges: ${objToScssMap(UNICODE_RANGES)};`, - `$ranges: map.keys($unicode-ranges)`, ].join('\n'), ); console.log('📝 Wrote build infos to', coloredPath(path));