@vtmn/css-loader
Advanced tools
Comparing version 1.1.1 to 1.1.2
{ | ||
"name": "@vtmn/css-loader", | ||
"version": "1.1.1", | ||
"version": "1.1.2", | ||
"description": "Decathlon Design System - Vitamin specific CSS styles for loader component", | ||
@@ -29,3 +29,3 @@ "keywords": [ | ||
"devDependencies": { | ||
"@vtmn/css-design-tokens": "^1.1.0", | ||
"@vtmn/css-design-tokens": "^1.1.1", | ||
"@vtmn/css-postcss-config": "*" | ||
@@ -43,3 +43,3 @@ }, | ||
"svelte": "dist/index-with-vars.css", | ||
"gitHead": "f977fa9252e3a376409a2505de8440bf5879e36c" | ||
"gitHead": "4d6a964d70f5e6b2ccaf341f9336fe5bb8dbce1f" | ||
} |
@@ -32,4 +32,24 @@ # `@vtmn/css-loader` | ||
Shown below is a sample loader markup used to load from a CDN: | ||
You can install them with [FontSource](https://github.com/fontsource/fontsource): | ||
```sh | ||
# with npm | ||
npm i -S @fontsource/roboto @fontsource/roboto-condensed | ||
# with yarn | ||
yarn add @fontsource/roboto @fontsource/roboto-condensed | ||
``` | ||
Then, within your app entry file or site component, import it in: | ||
```javascript | ||
import '@fontsource/roboto'; // Defaults to weight 400 | ||
import '@fontsource/roboto/400.css'; // Specify weight | ||
import '@fontsource/roboto/400-italic.css'; // Specify weight and style | ||
``` | ||
In order to enhance performance of your app, please read about [font subsetting](https://web.dev/font-best-practices/#subset-fonts). [FontSource explains it here](https://fontsource.org/docs/getting-started/subsets). | ||
Otherwise, you can also load them through CDN: | ||
```html | ||
@@ -42,3 +62,3 @@ <link | ||
You can also do it via CSS Import: | ||
Finally, you can also import them via CSS import: | ||
@@ -49,19 +69,2 @@ ```css | ||
Otherwise, you can install them with `typeface`: | ||
```sh | ||
# with npm | ||
npm i -S typeface-roboto typeface-roboto-condensed | ||
# with yarn | ||
yarn add typeface-roboto typeface-roboto-condensed | ||
``` | ||
Then, you can import them in your entry-point: | ||
```javascript | ||
import 'typeface-roboto'; | ||
import 'typeface-roboto-condensed'; | ||
``` | ||
# Usage | ||
@@ -68,0 +71,0 @@ |
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
27849
152