@vonage/vvd-fonts
Advanced tools
Comparing version 0.15.3 to 0.16.0
@@ -0,1 +1,5 @@ | ||
# [0.16.0](https://github.com/vonage/vivid/compare/v0.15.3...v0.16.0) (2020-11-24) | ||
## [0.15.3](https://github.com/vonage/vivid/compare/v0.15.2...v0.15.3) (2020-11-16) | ||
@@ -2,0 +6,0 @@ |
{ | ||
"name": "@vonage/vvd-fonts", | ||
"version": "0.15.3", | ||
"version": "0.16.0", | ||
"description": "Vivid fonts initialisation service", | ||
@@ -30,7 +30,7 @@ "homepage": "https://github.com/Vonage/vivid/tree/master/common/fonts", | ||
"devDependencies": { | ||
"@vonage/vvd-foundation": "^0.15.3", | ||
"@vonage/vvd-foundation": "^0.16.0", | ||
"fs-extra": "^9.0.1", | ||
"lit-element": "^2.4.0" | ||
}, | ||
"gitHead": "f2b3b493632c6391c12670748144b3901cd770e1" | ||
"gitHead": "b74d147bf316ebf197e7cd64b4f9c1b067c34c7b" | ||
} |
@@ -6,15 +6,4 @@ # Vivid Fonts | ||
There are two API approaches to init the fonts in your application: | ||
* `JS/TS` driven - import our module and invoke the API method | ||
* `CSS` driven - link a single `CSS` stylesheet to rule them all | ||
To apply Vivid fonts in your application please refer to typography module documentation. | ||
See more details about each of those approaches down below. | ||
To use Vivid fonts in your application please apply the following `CSS` rule: | ||
``` | ||
body { | ||
font-family: var(--vvd-font-family-spezia); | ||
} | ||
``` | ||
--- | ||
@@ -44,11 +33,1 @@ | ||
--- | ||
#### `CSS` driven initialization | ||
Link the `vvd-fonts.css` from the location you've put our library in. | ||
It is highly advised to link this resource early in the application lifecycle (for example, up in the `head`). | ||
``` | ||
<link rel="stylesheet" href="@vonage/vvd-fonts/vvd-fonts.css" /> | ||
``` | ||
> Note: this approach will block the site's contents rendering until the fonts are fully fetched, yet no FOUC (flash of unstyled content) expected. |
import { css } from 'lit-element'; | ||
export const style = css `:root{--vvd-font-family-spezia:"SpeziaWeb"}@font-face{font-family:"SpeziaWeb";src:url("FONTS_BASE_URL/SpeziaWeb-Regular.woff2") format("woff2");font-style:normal;font-weight:400}@font-face{font-family:"SpeziaWeb";src:url("FONTS_BASE_URL/SpeziaWeb-WideMedium.woff2") format("woff2");font-style:normal;font-weight:500}@font-face{font-family:"SpeziaWeb";src:url("FONTS_BASE_URL/SpeziaWeb-SemiBold.woff2") format("woff2");font-style:normal;font-weight:600}@supports(font-variation-settings: "wdth" 9){:root{--vvd-font-family-spezia:"SpeziaWebVariable"}@font-face{font-family:"SpeziaWebVariable";src:url("FONTS_BASE_URL/Spezia_Web_Complete_Upright.woff2") format("woff2-variations");font-style:normal;font-weight:1 1000;font-stretch:50% 200%}}`; | ||
export const style = css `:root{--vvd-font-family-spezia:"SpeziaWeb"}@font-face{font-family:"SpeziaWeb";src:url("FONTS_BASE_URL/SpeziaWeb-Regular.woff2") format("woff2");font-style:normal;font-weight:400}@font-face{font-family:"SpeziaWeb";src:url("FONTS_BASE_URL/SpeziaWeb-WideMedium.woff2") format("woff2");font-style:normal;font-weight:500}@font-face{font-family:"SpeziaWeb";src:url("FONTS_BASE_URL/SpeziaWeb-SemiBold.woff2") format("woff2");font-style:normal;font-weight:600}@font-face{font-family:"SpeziaMonoWeb";src:url("FONTS_BASE_URL/SpeziaWeb-MonoRegular.woff2") format("woff2");font-style:normal;font-weight:400}@supports(font-variation-settings: "wdth" 9){:root{--vvd-font-family-spezia:"SpeziaWebVariable"}@font-face{font-family:"SpeziaWebVariable";src:url("FONTS_BASE_URL/Spezia_Web_Complete_Upright.woff2") format("woff2-variations");font-style:normal;font-weight:1 1000;font-stretch:50% 200%}@font-face{font-family:"SpeziaMonoWebVariable";src:url("FONTS_BASE_URL/Spezia_Web_Monospace_Complete.woff2") format("woff2-variations");font-style:normal;font-weight:1 1000;font-stretch:50% 200%}}`; | ||
//# sourceMappingURL=vvd-fonts.css.js.map |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
26062
10
80
32