Skip to content

Commit

Permalink
feat(css): add Spezia font CSS to library (VIV-989) (#1107)
Browse files Browse the repository at this point in the history 
* VIV-989 Add Spezia font CSS in `@Vonage/vivid/styles/fonts/spezia-variable.css`.

* VIV-989 Modify docs with instructions on how to import the Spezia font.

* Move CSS file to SCSS.

* Add mono font for code typography.

* Update fonts on CDN with latest version.

* Add `font-display: optional;` to avoid FOUT.

* Add docs to avoid FOIT.
  • Loading branch information
@acelletti
acelletti authored Apr 18, 2023
1 parent 0d05674 commit 34558ec
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 54 deletions.
64 changes: 11 additions & 53 deletions docs/getting-started/fonts-and-tokens.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<vwc-note connotation="warning" icon="warning-solid" headline="The @font-face declaration must be placed at the top of the CSS file."></vwc-note>
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 `<head>` 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
<head>
<link rel="preload" href="https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2" type="font/woff2" as="font" crossorigin="anonymous" >
<link rel="preload" href="https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2" type="font/woff2" as="font" crossorigin="anonymous" >
</head>
```

---

## Have questions?

Still looking for answers, ask us in [#ask-vivid](https://vonage.slack.com/archives/C013F0YKH99) slack channel.
Still looking for answers, ask us in [#ask-vivid](https://vonage.slack.com/archives/C013F0YKH99) slack channel.
3 changes: 2 additions & 1 deletion libs/styles/project.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
]
}
}
Expand Down
31 changes: 31 additions & 0 deletions libs/styles/src/lib/fonts/spezia-variable.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 34558ec

Please sign in to comment.