Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vonage/vvd-fonts

Package Overview
Dependencies
Maintainers
14
Versions
126
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vonage/vvd-fonts - npm Package Compare versions

Comparing version 0.15.3 to 0.16.0

4

CHANGELOG.md

@@ -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 @@

6

package.json
{
"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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc