From ec278bd7f18bd4d48c1f6c12098e12a699e999a3 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Sun, 26 Oct 2025 17:33:05 +0100 Subject: [PATCH 1/5] Fix the font-format example --- files/en-us/web/css/@supports/index.md | 36 +++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/@supports/index.md b/files/en-us/web/css/@supports/index.md index b7ba631505d5d76..2048237736ee477 100644 --- a/files/en-us/web/css/@supports/index.md +++ b/files/en-us/web/css/@supports/index.md @@ -302,17 +302,45 @@ If a browser doesn't support the font technology, a fallback font (`Bungee-fallb ### Testing for the support of a font format -The following example applies the CSS style if the browser supports the `woff2` font format: +The following example uses the WOFF 2 version of the font if the browser supports this font format, otherwise it falls back to the previously specified WOFF 1 version: ```css +@font-face { + font-family: "Open Sans WOFF 1"; + src: url("open-sans.woff") format("woff"); +} + +@font-face { + font-family: "Open Sans WOFF 2"; + src: url("open-sans.woff2") format("woff2"); +} + +body { + font-family: "Open Sans WOFF 1", sans-serif; +} + @supports font-format(woff2) { - p { - font-family: "Open Sans", sans-serif; - src: url("open-sans.woff2") format("woff2"); + body { + font-family: "Open Sans WOFF 2", sans-serif; } } ``` +However, a more efficient way to specify multiple font formats is to list them in the `src` descriptor of a single {{cssxref("@font-face")}} at-rule in the order from the most preferred format to the least preferred: + +```css +@font-face { + font-family: "Open Sans"; + src: + url("open-sans.woff2") format("woff2"), + url("open-sans.woff") format("woff"); +} + +body { + font-family: "Open Sans", sans-serif; +} +``` + ## Specifications {{Specifications}} From 0b76c78689bf334ec1263adcff9f18ebf9fd39e9 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Mon, 27 Oct 2025 12:30:08 +0100 Subject: [PATCH 2/5] Call formats WOFF and WOFF2 --- files/en-us/web/css/@supports/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/css/@supports/index.md b/files/en-us/web/css/@supports/index.md index 2048237736ee477..6a8e841a6e08ed3 100644 --- a/files/en-us/web/css/@supports/index.md +++ b/files/en-us/web/css/@supports/index.md @@ -302,26 +302,26 @@ If a browser doesn't support the font technology, a fallback font (`Bungee-fallb ### Testing for the support of a font format -The following example uses the WOFF 2 version of the font if the browser supports this font format, otherwise it falls back to the previously specified WOFF 1 version: +The following example uses the WOFF2 version of the font if the browser supports this font format, otherwise it falls back to the previously specified WOFF version: ```css @font-face { - font-family: "Open Sans WOFF 1"; + font-family: "Open Sans WOFF"; src: url("open-sans.woff") format("woff"); } @font-face { - font-family: "Open Sans WOFF 2"; + font-family: "Open Sans WOFF2"; src: url("open-sans.woff2") format("woff2"); } body { - font-family: "Open Sans WOFF 1", sans-serif; + font-family: "Open Sans WOFF", sans-serif; } @supports font-format(woff2) { body { - font-family: "Open Sans WOFF 2", sans-serif; + font-family: "Open Sans WOFF2", sans-serif; } } ``` From 6c59703aa2e623d7e18138738b37ec2f17881d0b Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Mon, 27 Oct 2025 12:31:01 +0100 Subject: [PATCH 3/5] Fix color font fallback example --- files/en-us/web/css/@supports/index.md | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/css/@supports/index.md b/files/en-us/web/css/@supports/index.md index 6a8e841a6e08ed3..8573d9cfd2aa90a 100644 --- a/files/en-us/web/css/@supports/index.md +++ b/files/en-us/web/css/@supports/index.md @@ -275,28 +275,25 @@ ul:has(> li li) { ### Testing for the support of a font technology -The following example applies the CSS style if the browser supports the `COLRv1` font technology: +The following example applies the [Bungee Spice](https://fonts.google.com/specimen/Bungee+Spice) color font family if the browser supports the `COLRv1` font technology: ```css -@import "https://fonts.googleapis.com/css2?family=Bungee+Spice"; - @supports font-tech(color-COLRv1) { - p { + body { font-family: "Bungee Spice", fantasy; } } ``` It's also possible to test for the support of a font technology by using the `tech` function inside the {{CSSxRef("@font-face")}} at-rule. -If a browser doesn't support the font technology, a fallback font (`Bungee-fallback.otf`) can be used instead. +If a browser doesn't support the color font technology, a regular [Bungee](https://fonts.google.com/specimen/Bungee) font can be used instead. ```css @font-face { font-family: "Bungee Spice"; src: - url("https://fonts.googleapis.com/css2?family=Bungee+Spice") - tech(color-COLRv1), - url("Bungee-fallback.otf") format("opentype"); + url("bungee-spice.woff2") tech(color-COLRv1) format("woff2"), + url("bungee.woff2") format("woff2"); } ``` From 20ad6094bcc4c8e0ebb121d35f74858589dcbc97 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Tue, 28 Oct 2025 13:02:48 +0100 Subject: [PATCH 4/5] Use font, not font family --- files/en-us/web/css/@supports/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/@supports/index.md b/files/en-us/web/css/@supports/index.md index 8573d9cfd2aa90a..510aae793cd60bd 100644 --- a/files/en-us/web/css/@supports/index.md +++ b/files/en-us/web/css/@supports/index.md @@ -275,7 +275,7 @@ ul:has(> li li) { ### Testing for the support of a font technology -The following example applies the [Bungee Spice](https://fonts.google.com/specimen/Bungee+Spice) color font family if the browser supports the `COLRv1` font technology: +The following example applies the [Bungee Spice](https://fonts.google.com/specimen/Bungee+Spice) color font if the browser supports the `COLRv1` font technology: ```css @supports font-tech(color-COLRv1) { From 00513d65754bd83b94282840271fbe7cd7ab1465 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Tue, 28 Oct 2025 13:59:42 +0100 Subject: [PATCH 5/5] Fix the regular Bungee reference --- files/en-us/web/css/@supports/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/@supports/index.md b/files/en-us/web/css/@supports/index.md index 510aae793cd60bd..f607e44ffba7b6c 100644 --- a/files/en-us/web/css/@supports/index.md +++ b/files/en-us/web/css/@supports/index.md @@ -286,7 +286,7 @@ The following example applies the [Bungee Spice](https://fonts.google.com/specim ``` It's also possible to test for the support of a font technology by using the `tech` function inside the {{CSSxRef("@font-face")}} at-rule. -If a browser doesn't support the color font technology, a regular [Bungee](https://fonts.google.com/specimen/Bungee) font can be used instead. +In the following example, if a browser doesn't support the color font technology in the [`bungee-spice.woff2`](https://fonts.google.com/specimen/Bungee+Spice) font, a regular [`bungee.woff2`](https://fonts.google.com/specimen/Bungee) font will be used instead. ```css @font-face {