@ni/nimble-tokens 4.7.0 → 4.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fonts/README.md +17 -0
- package/dist/fonts/css/fonts.css +32 -0
- package/package.json +1 -1
- package/dist/fonts/assets/README.md +0 -12
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# Google Web Fonts
|
|
2
|
+
|
|
3
|
+
Original font sources:
|
|
4
|
+
|
|
5
|
+
* [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro)
|
|
6
|
+
* [Noto Serif](https://fonts.google.com/noto/specimen/Noto+Serif)
|
|
7
|
+
|
|
8
|
+
Converted to WOFF2 format using [a tff to woff2](https://everythingfonts.com/ttf-to-woff2) recommended by [google-webfonts-helper](https://github.com/majodev/google-webfonts-helper)
|
|
9
|
+
|
|
10
|
+
# Adding new fonts
|
|
11
|
+
|
|
12
|
+
New font assets should be added to the `nimble-tokens/dist/fonts/assets` directory and referenced in from `nimble-tokens/dist/fonts/css/fonts.css` so that they will be loaded by applications using nimble.
|
|
13
|
+
|
|
14
|
+
## Fallback fonts
|
|
15
|
+
|
|
16
|
+
When adding new fonts, you should also create size-adjusted fallback fonts to use with them. Follow the pattern being used in `nimble-tokens/dist/fonts/css/fonts.css` to define new `@font-face`s that utilize the `size-adjust` descriptor. There is an [online tool](https://www.industrialempathy.com/perfect-ish-font-fallback/) you can use to automatically select a value for `size-adjust` which the tool's author says is sufficient to avoid cumulative layout shift. (There are also `ascent-override`, `descent-override`, and `line-gap-override` descriptors, but we don't need to use those.) For different `font-weight` versions of the fallback font, you can use the same `size-adjust` value.
|
|
17
|
+
|
package/dist/fonts/css/fonts.css
CHANGED
|
@@ -6,6 +6,14 @@
|
|
|
6
6
|
font-display: swap;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
@font-face {
|
|
10
|
+
font-family: "Source Sans Pro Fallback";
|
|
11
|
+
font-style: normal;
|
|
12
|
+
font-weight: 400;
|
|
13
|
+
size-adjust: 93.75%;
|
|
14
|
+
src: local("Arial");
|
|
15
|
+
}
|
|
16
|
+
|
|
9
17
|
@font-face {
|
|
10
18
|
font-family: 'Source Sans Pro';
|
|
11
19
|
font-style: normal;
|
|
@@ -14,6 +22,14 @@
|
|
|
14
22
|
font-display: swap;
|
|
15
23
|
}
|
|
16
24
|
|
|
25
|
+
@font-face {
|
|
26
|
+
font-family: "Source Sans Pro Fallback";
|
|
27
|
+
font-style: normal;
|
|
28
|
+
font-weight: 300;
|
|
29
|
+
size-adjust: 93.75%;
|
|
30
|
+
src: local("Arial");
|
|
31
|
+
}
|
|
32
|
+
|
|
17
33
|
@font-face {
|
|
18
34
|
font-family: 'Source Sans Pro';
|
|
19
35
|
font-style: normal;
|
|
@@ -22,6 +38,14 @@
|
|
|
22
38
|
font-display: swap;
|
|
23
39
|
}
|
|
24
40
|
|
|
41
|
+
@font-face {
|
|
42
|
+
font-family: "Source Sans Pro Fallback";
|
|
43
|
+
font-style: normal;
|
|
44
|
+
font-weight: 600;
|
|
45
|
+
size-adjust: 93.75%;
|
|
46
|
+
src: local("Arial");
|
|
47
|
+
}
|
|
48
|
+
|
|
25
49
|
@font-face {
|
|
26
50
|
font-family: 'Noto Serif';
|
|
27
51
|
font-style: normal;
|
|
@@ -29,3 +53,11 @@
|
|
|
29
53
|
src: url('../assets/NotoSerif-Regular.woff2') format('woff2');
|
|
30
54
|
font-display: swap;
|
|
31
55
|
}
|
|
56
|
+
|
|
57
|
+
@font-face {
|
|
58
|
+
font-family: "Noto Serif Fallback";
|
|
59
|
+
font-style: normal;
|
|
60
|
+
font-weight: 400;
|
|
61
|
+
size-adjust: 119%;
|
|
62
|
+
src: local("Times New Roman");
|
|
63
|
+
}
|
package/package.json
CHANGED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
# Google Web Fonts
|
|
2
|
-
|
|
3
|
-
Original font sources:
|
|
4
|
-
|
|
5
|
-
* [Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro)
|
|
6
|
-
* [Noto Serif](https://fonts.google.com/noto/specimen/Noto+Serif)
|
|
7
|
-
|
|
8
|
-
Converted to WOFF2 format using [a tff to woff2](https://everythingfonts.com/ttf-to-woff2) recommended by [google-webfonts-helper](https://github.com/majodev/google-webfonts-helper)
|
|
9
|
-
|
|
10
|
-
# Adding new fonts
|
|
11
|
-
|
|
12
|
-
New font assets should be added to the `nimble-tokens/dist/fonts/assets` directory and referenced in from `nimble-tokens/dist/fonts/css/fonts.css` so that they will be loaded by applications using nimble.
|