diff --git a/docs/getting-started/fonts-and-tokens.md b/docs/getting-started/fonts-and-tokens.md
index 0a763a7014..4ad98ff9d0 100644
--- a/docs/getting-started/fonts-and-tokens.md
+++ b/docs/getting-started/fonts-and-tokens.md
@@ -6,67 +6,25 @@ Vivid uses **Montserrat** and **Roboto Mono** Google fonts.
**Vonage** products should use the brand-specific **Spezia** font families.
-To obtain the **Spezia** webfont kit, go to this repository: [https://github.com/Vonage/spezia-webfont-kit](https://github.com/Vonage/spezia-webfont-kit)
-Download the font and add it to your project.
-Make sure it is added to the correct path as indicated in the CSS file (or update the path in the CSS below).
+## Spezia Variable
-```
-assets/fonts/Spezia_Web_Complete/VariableFont/Complete
-```
-
-In your CSS file, add the following code to specify & load the font family:
-
-
+To use the **Spezia** webfont kit in your project, import the following file:
-```css
-@font-face {
- font-family: SpeziaCompleteVariableUpright;
- font-stretch: 50% 200%;
- font-weight: 1 1000;
- src: url('assets/fonts/Spezia_Web_Complete/VariableFont/Complete/SpeziaCompleteVariableUprightWeb.woff2') format('woff2');
-}
-
-@font-face {
- font-family: SpeziaCompleteVariableItalic;
- font-stretch: 50% 200%;
- font-weight: 1 1000;
- src: url('assets/fonts/Spezia_Web_Complete/VariableFont/Complete/SpeziaCompleteVariableItalicWeb.woff2') format('woff2');
-}
-
-@font-face {
- font-family: SpeziaMonoCompleteVariable;
- font-stretch: 50% 200%;
- font-weight: 1 1000;
- src: url('assets/fonts/Spezia_Web_Complete/VariableFont/Complete/SpeziaMonoCompleteVariableWeb.woff2') format('woff2');
-}
+```js
+'node_modules/@vonage/styles/fonts/spezia-variable.css';
```
+To avoid FOIT (Flash Of Invisible Text), you also should preload the fonts in your HTML `` section:
-Now that we have the **Spezia** font families set up - we need to override Vivid's default typefaces by applying the following to the css:
-
-```css
-.vvd-root {
- /* override typefaces */
- --vvd-typography-headline: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 SpeziaCompleteVariableUpright;
- --vvd-typography-subtitle: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 SpeziaCompleteVariableUpright;
- --vvd-typography-heading-1: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 SpeziaCompleteVariableUpright;
- --vvd-typography-heading-2: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 SpeziaCompleteVariableUpright;
- --vvd-typography-heading-3: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 SpeziaCompleteVariableUpright;
- --vvd-typography-heading-4: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 SpeziaCompleteVariableUpright;
- --vvd-typography-base: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaCompleteVariableUpright;
- --vvd-typography-base-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaCompleteVariableUpright;
- --vvd-typography-base-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaMonoCompleteVariable;
- --vvd-typography-base-condensed: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 SpeziaCompleteVariableUpright;
- --vvd-typography-base-condensed-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 SpeziaCompleteVariableUpright;
- --vvd-typography-base-extended: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 SpeziaCompleteVariableUpright;
- --vvd-typography-base-extended-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 SpeziaCompleteVariableUpright;
- /* If vivid typography css core style is included in application, setting the '--vvd-size-font-scale-base'
- css variable as derivative will flexibly update font-size by the user preference */
-}
+```html
+
+
+
+
```
---
## Have questions?
-Still looking for answers, ask us in [#ask-vivid](https://vonage.slack.com/archives/C013F0YKH99) slack channel.
\ No newline at end of file
+Still looking for answers, ask us in [#ask-vivid](https://vonage.slack.com/archives/C013F0YKH99) slack channel.
diff --git a/libs/styles/project.json b/libs/styles/project.json
index 77b511cde0..519e9e2c85 100644
--- a/libs/styles/project.json
+++ b/libs/styles/project.json
@@ -28,7 +28,8 @@
"scss": {
"commands": [
"sass libs/styles/src/lib/tokens:dist/libs/styles/tokens",
- "sass libs/styles/src/lib/core:dist/libs/styles/core"
+ "sass libs/styles/src/lib/core:dist/libs/styles/core",
+ "sass libs/styles/src/lib/fonts:dist/libs/styles/fonts"
]
}
}
diff --git a/libs/styles/src/lib/fonts/spezia-variable.scss b/libs/styles/src/lib/fonts/spezia-variable.scss
new file mode 100644
index 0000000000..45a65f3202
--- /dev/null
+++ b/libs/styles/src/lib/fonts/spezia-variable.scss
@@ -0,0 +1,31 @@
+@font-face {
+ font-family: SpeziaCompleteVariableUpright;
+ font-stretch: 50% 200%;
+ font-weight: 1 1000;
+ font-display: optional;
+ src: url('https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2') format('woff2');
+}
+
+@font-face {
+ font-family: SpeziaMonoCompleteVariable;
+ font-stretch: 50% 200%;
+ font-weight: 1 1000;
+ font-display: optional;
+ src: url('https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2') format('woff2');
+}
+
+.vvd-root {
+ --vvd-typography-headline: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 SpeziaCompleteVariableUpright;
+ --vvd-typography-subtitle: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 SpeziaCompleteVariableUpright;
+ --vvd-typography-heading-1: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 SpeziaCompleteVariableUpright;
+ --vvd-typography-heading-2: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 SpeziaCompleteVariableUpright;
+ --vvd-typography-heading-3: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 SpeziaCompleteVariableUpright;
+ --vvd-typography-heading-4: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 SpeziaCompleteVariableUpright;
+ --vvd-typography-base: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaCompleteVariableUpright;
+ --vvd-typography-base-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaCompleteVariableUpright;
+ --vvd-typography-base-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 SpeziaMonoCompleteVariable;
+ --vvd-typography-base-condensed: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 SpeziaCompleteVariableUpright;
+ --vvd-typography-base-condensed-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 SpeziaCompleteVariableUpright;
+ --vvd-typography-base-extended: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 SpeziaCompleteVariableUpright;
+ --vvd-typography-base-extended-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 SpeziaCompleteVariableUpright;
+}