OpenType font settings that allows a single font file to behave like multiple fonts: it can contain all the allowed variations in width, weight, slant, optical size, or any other exposed axes of variation as defined by the font designer. Variations can be applied via the font-variation-settings
property.
Spec | https://w3c.github.io/csswg-drafts/css-fonts-4/#font-variation-settings-def |
---|---|
Status | W3C Working Draft |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
108 | |||||
107 (3,7) | 107 | TP | |||
106 (3,7) | 106 | 16.1 | |||
11 | 105 | 105 (3,7) | 105 | 16.0 | 91 |
10 | 104 | 104 (3,7) | 104 | 15.6 | 90 |
9 | 103 | 103 (3,7) | 103 | 15.5 | 89 |
8 | 102 | 102 (3,7) | 102 | 15.4 | 88 |
Show all | |||||
7 | 101 | 101 (3,7) | 101 | 15.2-15.3 | 87 |
6 | 100 | 100 (3,7) | 100 | 15.1 | 86 |
5.5 | 99 | 99 (3,7) | 99 | 15 | 85 |
98 | 98 (3,7) | 98 | 14.1 (7) | 84 | |
97 | 97 (3,7) | 97 | 14 (7) | 83 | |
96 | 96 (3,7) | 96 | 13.1 (7) | 82 | |
95 | 95 (3,7) | 95 | 13 (7) | 81 | |
94 | 94 (3,7) | 94 | 12.1 (3,6) | 80 | |
93 | 93 (3,7) | 93 | 12 (3,6) | 79 | |
92 | 92 (3,7) | 92 | 11.1 (3,6) | 78 | |
91 | 91 (3,7) | 91 | 11 (3,6) | 77 | |
90 | 90 (3,7) | 90 | 10.1 | 76 | |
89 | 89 (3,7) | 89 | 10 | 75 | |
88 | 88 (3,7) | 88 | 9.1 | 74 | |
87 | 87 (3,7) | 87 | 9 | 73 | |
86 | 86 (3,7) | 86 | 8 | 72 | |
85 | 85 (3,7) | 85 | 7.1 | 71 | |
84 | 84 (3,7) | 84 | 7 | 70 | |
83 | 83 (3,7) | 83 | 6.1 | 69 | |
81 | 82 (3,7) | 81 | 6 | 68 | |
80 | 81 (3,7) | 80 | 5.1 | 67 | |
79 | 80 (3,7) | 79 | 5 | 66 | |
18 | 79 (3,7) | 78 | 4 | 65 | |
17 | 78 (3,7) | 77 | 3.2 | 64 | |
16 | 77 (3,7) | 76 | 3.1 | 63 | |
15 | 76 (3,7) | 75 | 62 | ||
14 | 75 (3,7) | 74 | 60 | ||
13 | 74 (3,7) | 73 | 58 | ||
12 | 73 (3,7) | 72 | 57 | ||
72 (3,7) | 71 | 56 | |||
71 (3,7) | 70 | 55 | |||
70 (3,6) | 69 | 54 | |||
69 (3,6) | 68 | 53 (6) | |||
68 (3,6) | 67 | 52 (5,6) | |||
67 (3,6) | 66 (6) | 51 (5,6) | |||
66 (3,6) | 65 (5,6) | 50 (5,6) | |||
65 (3,6) | 64 (5,6) | 49 (5,6) | |||
64 (3,6) | 63 (5,6) | 48 | |||
63 (3,6) | 62 (5,6) | 47 | |||
62 (3,6) | 61 (1,6) | 46 | |||
61 (3,6) | 60 (1,6) | 45 | |||
60 (3,4,6) | 59 (1,6) | 44 | |||
59 (3,4,5,6) | 58 | 43 | |||
58 (3,4,5,6) | 57 | 42 | |||
57 (2,4,5,6) | 56 | 41 | |||
56 (2,4,5,6) | 55 | 40 | |||
55 (2,4,5,6) | 54 | 39 | |||
54 (2,4,5,6) | 53 | 38 | |||
53 (2,4,5,6) | 52 | 37 | |||
52 | 51 | 36 | |||
51 | 50 | 35 | |||
50 | 49 | 34 | |||
49 | 48 | 33 | |||
48 | 47 | 32 | |||
47 | 46 | 31 | |||
46 | 45 | 30 | |||
45 | 44 | 29 | |||
44 | 43 | 28 | |||
43 | 42 | 27 | |||
42 | 41 | 26 | |||
41 | 40 | 25 | |||
40 | 39 | 24 | |||
39 | 38 | 23 | |||
38 | 37 | 22 | |||
37 | 36 | 21 | |||
36 | 35 | 20 | |||
35 | 34 | 19 | |||
34 | 33 | 18 | |||
33 | 32 | 17 | |||
32 | 31 | 16 | |||
31 | 30 | 15 | |||
30 | 29 | 12.1 | |||
29 | 28 | 12 | |||
28 | 27 | 11.6 | |||
27 | 26 | 11.5 | |||
26 | 25 | 11.1 | |||
25 | 24 | 11 | |||
24 | 23 | 10.6 | |||
23 | 22 | 10.5 | |||
22 | 21 | 10.0-10.1 | |||
21 | 20 | 9.5-9.6 | |||
20 | 19 | 9 | |||
19 | 18 | ||||
18 | 17 | ||||
17 | 16 | ||||
16 | 15 | ||||
15 | 14 | ||||
14 | 13 | ||||
13 | 12 | ||||
12 | 11 | ||||
11 | 10 | ||||
10 | 9 | ||||
9 | 8 | ||||
8 | 7 | ||||
7 | 6 | ||||
6 | 5 | ||||
5 | 4 | ||||
4 | |||||
3.6 | |||||
3.5 | |||||
3 | |||||
2 |
Safari on iOS | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser | KaiOS Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|
16.1 | ||||||||||||
16.0 | all | 105 | 10 | 64 | 105 | 104 (6) | 11 | 13.4 | 18.0 (6) | 13.1 | 13.18 | 2.5 |
15.6 | 4.4.3-4.4.4 | 7 | 12.1 | 10 | 17.0 (6) | |||||||
15.5 | 4.4 | 12 | 16.0 (6) | |||||||||
15.4 | 4.2-4.3 | 11.5 | 15.0 (6) | |||||||||
Show all | ||||||||||||
15.2-15.3 | 4.1 | 11.1 | 14.0 (6) | |||||||||
15.0-15.1 | 4 | 11 | 13.0 (6) | |||||||||
14.5-14.8 | 3 | 10 | 12.0 (6) | |||||||||
14.0-14.4 | 2.3 | 11.1-11.2 (6) | ||||||||||
13.4-13.7 | 2.2 | 10.1 (6) | ||||||||||
13.3 | 2.1 | 9.2 (6) | ||||||||||
13.2 | 8.2 (6) | |||||||||||
13.0-13.1 | 7.2-7.4 | |||||||||||
12.2-12.5 (6) | 6.2-6.4 | |||||||||||
12.0-12.1 (6) | 5.0-5.4 | |||||||||||
11.3-11.4 (6) | 4 | |||||||||||
11.0-11.2 (6) | ||||||||||||
10.3 | ||||||||||||
10.0-10.2 | ||||||||||||
9.3 | ||||||||||||
9.0-9.2 | ||||||||||||
8.1-8.4 | ||||||||||||
8 | ||||||||||||
7.0-7.1 | ||||||||||||
6.0-6.1 | ||||||||||||
5.0-5.1 | ||||||||||||
4.2-4.3 | ||||||||||||
4.0-4.1 | ||||||||||||
3.2 |
Works with Experimental Web Platform features enabled
Requires macOS 10.12 Sierra or later and the following about:config flags to be enabled:
layout.css.font-variations.enabled
,
gfx.downloadable_fonts.keep_variation_tables
Requires macOS 10.13 High Sierra or later or Windows 10 1709 "Fall Creators Update" or later
Does not support the font-weight
and font-stretch
properties.
Does not support format('truetype-variations')
, format('woff-variations')
, format('woff2-variations')
Does not support OpenType-CFF2 fonts
OpenType-CFF2 support requires macOS 10.15 Catalina or later
Chrome supports format('*-variations')
inside the @font-face
block only starting from Chrome version 66.
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/variable-fonts