@fontsource/material-symbols-sharp 5.0.1 → 5.0.3

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.
Files changed (19) hide show
  1. package/100.css +1 -1
  2. package/200.css +1 -1
  3. package/300.css +1 -1
  4. package/400.css +1 -1
  5. package/500.css +1 -1
  6. package/600.css +1 -1
  7. package/700.css +1 -1
  8. package/README.md +6 -10
  9. package/index.css +4 -4
  10. package/latin-100.css +1 -1
  11. package/latin-200.css +1 -1
  12. package/latin-300.css +1 -1
  13. package/latin-400.css +1 -1
  14. package/latin-500.css +1 -1
  15. package/latin-600.css +1 -1
  16. package/latin-700.css +1 -1
  17. package/latin.css +7 -7
  18. package/package.json +2 -2
  19. package/scss/mixins.scss +19 -10
package/100.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 100;
7
7
  src: url(./files/material-symbols-sharp-latin-100-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-100-normal.woff) format('woff');
8
8
  }
package/200.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 200;
7
7
  src: url(./files/material-symbols-sharp-latin-200-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-200-normal.woff) format('woff');
8
8
  }
package/300.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 300;
7
7
  src: url(./files/material-symbols-sharp-latin-300-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-300-normal.woff) format('woff');
8
8
  }
package/400.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 400;
7
7
  src: url(./files/material-symbols-sharp-latin-400-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-400-normal.woff) format('woff');
8
8
  }
package/500.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 500;
7
7
  src: url(./files/material-symbols-sharp-latin-500-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-500-normal.woff) format('woff');
8
8
  }
package/600.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 600;
7
7
  src: url(./files/material-symbols-sharp-latin-600-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-600-normal.woff) format('woff');
8
8
  }
package/700.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 700;
7
7
  src: url(./files/material-symbols-sharp-latin-700-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-700-normal.woff) format('woff');
8
8
  }
package/README.md CHANGED
@@ -6,7 +6,7 @@ The CSS and web font files to easily self-host the “Material Symbols Sharp”
6
6
 
7
7
  ## Quick Installation
8
8
 
9
- Fontsource has a variety of methods to import CSS, such as using a bundler like Webpack. Alternatively, it supports SASS. Full documentation can be found [here](https://fontsource.org/docs/getting-started/introduction).
9
+ Fontsource offers multiple methods to import the CSS, including using a bundler like Vite or using SASS. You can find full documentation [here](https://fontsource.org/docs/getting-started/introduction).
10
10
 
11
11
  ```javascript
12
12
  npm install @fontsource/material-symbols-sharp
@@ -18,7 +18,6 @@ Within your app entry file or site component, import it in.
18
18
  import "@fontsource/material-symbols-sharp"; // Defaults to weight 400
19
19
  import "@fontsource/material-symbols-sharp/400.css"; // Specify weight
20
20
  import "@fontsource/material-symbols-sharp/400-italic.css"; // Specify weight and style
21
-
22
21
  ```
23
22
 
24
23
  Supported variables:
@@ -26,6 +25,8 @@ Supported variables:
26
25
  - Styles: `[normal]`
27
26
  - Subsets: `[latin]`
28
27
 
28
+ > Note: `italic` may not be supported by all fonts. To learn more about what weights and styles are supported, please visit the [Fontsource website](https://fontsource.org/fonts/material-symbols-sharp).
29
+
29
30
  Finally, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
30
31
 
31
32
  ```css
@@ -34,18 +35,13 @@ body {
34
35
  }
35
36
  ```
36
37
 
37
- ## Variable Fonts
38
-
39
- This particular typeface supports [variable fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide).
40
- Variable documentation can be found [here](https://fontsource.org/docs/getting-started/variable).
41
-
42
38
  ## Licensing
43
- It is important to always read the license for every font that you use.
44
- Most of the fonts in the collection use the SIL Open Font License, v1.1. Some fonts use the Apache 2 license. The Ubuntu fonts use the Ubuntu Font License v1.0.
39
+ Always make sure to read the license for each font you use. Most of the fonts in the collection use the SIL Open Font License, v1.1. Some fonts use the Apache 2 license. The Ubuntu fonts use the Ubuntu Font License v1.0.
45
40
 
46
41
  Copyright 2022, 2022 Google LLC. All Rights Reserved.
47
42
  [Apache-2.0](http://www.apache.org/licenses/LICENSE-2.0.html)
48
43
 
49
44
  ## Other Notes
50
45
  Font version (provided by source): `v104`.
51
- Feel free to star and contribute new ideas to this repository that aim to improve the performance of font loading, as well as expanding the existing library we already have. Any suggestions or ideas can be voiced via an [issue](https://github.com/fontsource/fontsource/issues).
46
+
47
+ If you have any suggestions or ideas to improve the performance of font loading or expand the existing library, feel free to star and contribute to this repository. You can share your suggestions or ideas by creating an [issue](https://github.com/fontsource/fontsource/issues).
package/index.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 100;
7
7
  src: url(./files/material-symbols-sharp-latin-100-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-100-normal.woff) format('woff');
8
8
  }
@@ -11,7 +11,7 @@
11
11
  @font-face {
12
12
  font-family: 'Material Symbols Sharp';
13
13
  font-style: normal;
14
- font-display: var(--fontsource-display, swap);
14
+ font-display: swap;
15
15
  font-weight: 200;
16
16
  src: url(./files/material-symbols-sharp-latin-200-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-200-normal.woff) format('woff');
17
17
  }
@@ -20,7 +20,7 @@
20
20
  @font-face {
21
21
  font-family: 'Material Symbols Sharp';
22
22
  font-style: normal;
23
- font-display: var(--fontsource-display, swap);
23
+ font-display: swap;
24
24
  font-weight: 300;
25
25
  src: url(./files/material-symbols-sharp-latin-300-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-300-normal.woff) format('woff');
26
26
  }
@@ -29,7 +29,7 @@
29
29
  @font-face {
30
30
  font-family: 'Material Symbols Sharp';
31
31
  font-style: normal;
32
- font-display: var(--fontsource-display, swap);
32
+ font-display: swap;
33
33
  font-weight: 400;
34
34
  src: url(./files/material-symbols-sharp-latin-400-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-400-normal.woff) format('woff');
35
35
  }
package/latin-100.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 100;
7
7
  src: url(./files/material-symbols-sharp-latin-100-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-100-normal.woff) format('woff');
8
8
  }
package/latin-200.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 200;
7
7
  src: url(./files/material-symbols-sharp-latin-200-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-200-normal.woff) format('woff');
8
8
  }
package/latin-300.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 300;
7
7
  src: url(./files/material-symbols-sharp-latin-300-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-300-normal.woff) format('woff');
8
8
  }
package/latin-400.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 400;
7
7
  src: url(./files/material-symbols-sharp-latin-400-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-400-normal.woff) format('woff');
8
8
  }
package/latin-500.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 500;
7
7
  src: url(./files/material-symbols-sharp-latin-500-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-500-normal.woff) format('woff');
8
8
  }
package/latin-600.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 600;
7
7
  src: url(./files/material-symbols-sharp-latin-600-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-600-normal.woff) format('woff');
8
8
  }
package/latin-700.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 700;
7
7
  src: url(./files/material-symbols-sharp-latin-700-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-700-normal.woff) format('woff');
8
8
  }
package/latin.css CHANGED
@@ -2,7 +2,7 @@
2
2
  @font-face {
3
3
  font-family: 'Material Symbols Sharp';
4
4
  font-style: normal;
5
- font-display: var(--fontsource-display, swap);
5
+ font-display: swap;
6
6
  font-weight: 100;
7
7
  src: url(./files/material-symbols-sharp-latin-100-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-100-normal.woff) format('woff');
8
8
  }
@@ -11,7 +11,7 @@
11
11
  @font-face {
12
12
  font-family: 'Material Symbols Sharp';
13
13
  font-style: normal;
14
- font-display: var(--fontsource-display, swap);
14
+ font-display: swap;
15
15
  font-weight: 200;
16
16
  src: url(./files/material-symbols-sharp-latin-200-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-200-normal.woff) format('woff');
17
17
  }
@@ -20,7 +20,7 @@
20
20
  @font-face {
21
21
  font-family: 'Material Symbols Sharp';
22
22
  font-style: normal;
23
- font-display: var(--fontsource-display, swap);
23
+ font-display: swap;
24
24
  font-weight: 300;
25
25
  src: url(./files/material-symbols-sharp-latin-300-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-300-normal.woff) format('woff');
26
26
  }
@@ -29,7 +29,7 @@
29
29
  @font-face {
30
30
  font-family: 'Material Symbols Sharp';
31
31
  font-style: normal;
32
- font-display: var(--fontsource-display, swap);
32
+ font-display: swap;
33
33
  font-weight: 400;
34
34
  src: url(./files/material-symbols-sharp-latin-400-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-400-normal.woff) format('woff');
35
35
  }
@@ -38,7 +38,7 @@
38
38
  @font-face {
39
39
  font-family: 'Material Symbols Sharp';
40
40
  font-style: normal;
41
- font-display: var(--fontsource-display, swap);
41
+ font-display: swap;
42
42
  font-weight: 500;
43
43
  src: url(./files/material-symbols-sharp-latin-500-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-500-normal.woff) format('woff');
44
44
  }
@@ -47,7 +47,7 @@
47
47
  @font-face {
48
48
  font-family: 'Material Symbols Sharp';
49
49
  font-style: normal;
50
- font-display: var(--fontsource-display, swap);
50
+ font-display: swap;
51
51
  font-weight: 600;
52
52
  src: url(./files/material-symbols-sharp-latin-600-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-600-normal.woff) format('woff');
53
53
  }
@@ -56,7 +56,7 @@
56
56
  @font-face {
57
57
  font-family: 'Material Symbols Sharp';
58
58
  font-style: normal;
59
- font-display: var(--fontsource-display, swap);
59
+ font-display: swap;
60
60
  font-weight: 700;
61
61
  src: url(./files/material-symbols-sharp-latin-700-normal.woff2) format('woff2'), url(./files/material-symbols-sharp-latin-700-normal.woff) format('woff');
62
62
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fontsource/material-symbols-sharp",
3
- "version": "5.0.1",
3
+ "version": "5.0.3",
4
4
  "description": "Self-host the Material Symbols Sharp font in a neatly bundled NPM package.",
5
5
  "main": "index.css",
6
6
  "publishConfig": {"access": "public"},
@@ -26,5 +26,5 @@
26
26
  "url": "https://github.com/fontsource/font-files.git",
27
27
  "directory": "fonts/google/material-symbols-sharp"
28
28
  },
29
- "publishHash": "3064fe8f3a8a7dcb"
29
+ "publishHash": "55e88b7fecfd2cbd"
30
30
  }
package/scss/mixins.scss CHANGED
@@ -11,25 +11,33 @@ $directory: null !default;
11
11
 
12
12
  $family: null !default;
13
13
  $display: null !default;
14
- $displayVar: null !default;
15
14
  $formats: null !default;
16
15
  $subsets: null !default;
17
16
  $weights: null !default;
18
17
  $styles: null !default;
19
18
  $axes: null !default;
20
19
 
20
+ // Deprecated
21
+ $displayVar: null !default;
22
+
21
23
  @mixin generator(
22
24
  $metadata: $metadata,
23
25
  $directory: $directory,
24
26
  $family: $family,
25
27
  $display: $display,
26
- $displayVar: $displayVar,
27
28
  $formats: $formats,
28
29
  $subsets: $subsets,
29
30
  $weights: $weights,
30
31
  $styles: $styles,
31
- $axes: $axes
32
+ $axes: $axes,
33
+
34
+ // Deprecated
35
+ $displayVar: $displayVar
32
36
  ) {
37
+ @if $displayVar != null {
38
+ @warn "$displayVar is deprecated due to the limitation of using css variables in @font-face (https://github.com/fontsource/fontsource/issues/726).";
39
+ }
40
+
33
41
  $isVariable: map.get($metadata, axes) != null;
34
42
 
35
43
  $directory: if(
@@ -40,7 +48,6 @@ $axes: null !default;
40
48
 
41
49
  $family: if($family, $family, map.get($metadata, family) + if($isVariable, ' Variable', ''));
42
50
  $display: if($display, $display, swap);
43
- $displayVar: if($displayVar != null, $displayVar, true);
44
51
  $formats: if(not $formats or $formats == all, if($isVariable, woff2, (woff2, woff)), $formats);
45
52
  $subsets: if(
46
53
  $subsets,
@@ -93,7 +100,6 @@ $axes: null !default;
93
100
  directory: $directory,
94
101
  family: $family,
95
102
  display: $display,
96
- displayVar: $displayVar,
97
103
  formats: $formats,
98
104
  subsets: $subsets,
99
105
  weights: $weights,
@@ -114,7 +120,7 @@ $axes: null !default;
114
120
  oblique map.get($metadata, axes, slnt, min) + deg map.get($metadata, axes, slnt, max) + deg,
115
121
  $style
116
122
  ),
117
- font-display: if($displayVar, var(--fontsource-display, $display), $display),
123
+ font-display: $display,
118
124
  font-weight: if(
119
125
  (($axis == full) or ($axis == wght)) and map.has-key($metadata, axes, wght),
120
126
  map.get($metadata, axes, wght, min) map.get($metadata, axes, wght, max),
@@ -141,24 +147,27 @@ $axes: null !default;
141
147
  $directory: $directory,
142
148
  $family: $family,
143
149
  $display: $display,
144
- $displayVar: $displayVar,
145
150
  $formats: $formats,
146
151
  $subsets: $subsets,
147
152
  $weights: $weights,
148
153
  $styles: $styles,
149
- $axes: $axes
154
+ $axes: $axes,
155
+
156
+ // Deprecated
157
+ $displayVar: $displayVar
150
158
  ) {
151
159
  @include generator(
152
160
  $metadata: $metadata,
153
161
  $directory: $directory,
154
162
  $family: $family,
155
163
  $display: $display,
156
- $displayVar: $displayVar,
157
164
  $formats: $formats,
158
165
  $subsets: $subsets,
159
166
  $weights: $weights,
160
167
  $styles: $styles,
161
- $axes: $axes
168
+ $axes: $axes,
169
+
170
+ $displayVar: $displayVar
162
171
  )
163
172
  using ($props) {
164
173
  /* #{map.get($props, variant)} */