docs: 📝 add advanced configuration

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.
+
+<!-- prettier-ignore -->
+```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` |

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));