Variable fonts

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.

W3C Working Draft: https://w3c.github.io/csswg-drafts/css-fonts-4/#font-variation-settings-def

Usage: 96.9% + 0% = 96.9%

Support summary

IE: Not supported
Edge: 17
Firefox: available but disabled by default since 53, notes for version 53₂, notes for version 58₃, notes for version 60₃, notes for version 61₃, notes for version 62₃, notes for version 71₃
Chrome: 67, partial since 62, available but disabled by default since 59, notes for version 59₁, notes for version 62₅, notes for version 66₆
Safari: 15, notes for version 11₃, notes for version 13₇
Opera: 54, partial since 49, notes for version 49₅, notes for version 53₆
Safari on iOS: 13.0-13.1, notes for version 11.0-11.2₆
Opera Mini: Not supported
Android Browser: 124
Blackberry Browser: Not supported
Opera Mobile: 80
Chrome for Android: 124
Firefox for Android: Not supported, notes for version 125₆
IE Mobile: Not supported
UC Browser for Android: 15.5
Samsung Internet: Not supported, notes for version 8.2₆
QQ Browser: 14.9
Baidu Browser: 13.52
KaiOS Browser: 3.0-3.1

Notes

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 ↑

Full support table

IE

5.5	6	7	8	9	10	11
n	n	n	n	n	n	n

Edge

12	13	14	15	16	17	18	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124
n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Firefox

2	3	3.5	3.6	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	128
n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n,d	n,d	n,d	n,d	n,d	n,d	n,d	n,d	n,d	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Chrome

4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127
n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n,d	n,d	n,d	a	a	a	a	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Safari

3.1	3.2	4	5	5.1	6	6.1	7	7.1	8	9	9.1	10	10.1	11	11.1	12	12.1	13	13.1	14	14.1	15	15.1	15.2-15.3	15.4	15.5	15.6	16.0	16.1	16.2	16.3	16.4	16.5	16.6	17.0	17.1	17.2	17.3	17.4	17.5	TP
n	n	n	n	n	n	n	n	n	n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Opera

9	9.5-9.6	10.0-10.1	10.5	10.6	11	11.1	11.5	11.6	12	12.1	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	60	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109
n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	a	a	a	a	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Safari on iOS

3.2	4.0-4.1	4.2-4.3	5.0-5.1	6.0-6.1	7.0-7.1	8	8.1-8.4	9.0-9.2	9.3	10.0-10.2	10.3	11.0-11.2	11.3-11.4	12.0-12.1	12.2-12.5	13.0-13.1	13.2	13.3	13.4-13.7	14.0-14.4	14.5-14.8	15.0-15.1	15.2-15.3	15.4	15.5	15.6-15.8	16.0	16.1	16.2	16.3	16.4	16.5	16.6-16.7	17.0	17.1	17.2	17.3	17.4	17.5
n	n	n	n	n	n	n	n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Opera Mini

all
n

Android Browser

2.1	2.2	2.3	3	4	4.1	4.2-4.3	4.4	4.4.3-4.4.4	124
n	n	n	n	n	n	n	n	n	y

Blackberry Browser

7	10
n	n

Opera Mobile

10	11	11.1	11.5	12	12.1	80
n	n	n	n	n	n	y

Chrome for Android

124
y

Firefox for Android

125
y

IE Mobile

10	11
n	n

UC Browser for Android

15.5
y

Samsung Internet

4	5.0-5.4	6.2-6.4	7.2-7.4	8.2	9.2	10.1	11.1-11.2	12.0	13.0	14.0	15.0	16.0	17.0	18.0	19.0	20	21	22	23	24
n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

QQ Browser

14.9
y

Baidu Browser

13.52
y

KaiOS Browser

2.5	3.0-3.1
n	y

y = supported
a = partially supported, see notes
x = supported with a prefix, e.g. moz, webkit
p = supported with a polyfill
d = available but disabled by default; the feature need to be enabled in about:config, chrome://flags, etc.
n = not supported
u = unknown/untested

Back to list