Add example of using css supports to opt in to an incremental font.

Fixes #212.

Overview.bs

@@ -240,7 +240,7 @@ only be loaded by a user agent which supports incremental font transfer.
 <pre>
 @font-face {
     font-family: "MyCoolWebFont";
-    src: url("MyCoolWebFont.otf") tech(incremental);
+    src: url("MyCoolWebFont-Incremental.otf") tech(incremental);
 }
 </pre>
 </div>
@@ -249,7 +249,7 @@ only be loaded by a user agent which supports incremental font transfer.
 <pre>
 @font-face {
     font-family: "MyCoolWebFont";
-    src: url("MyCoolWebFont.otf") tech(incremental);
+    src: url("MyCoolWebFont-Incremental.otf") tech(incremental);
     unicode-range: U+0000-00FF;
 }
 </pre>
@@ -259,6 +259,25 @@ As shown in the second example, [[css-fonts-4#unicode-range-desc|unicode-range]]
 unicode ranges should be set to match the coverage of the fully extended font. This will allow clients to avoid trying to load the IFT font
 if the font does not support any code points which are needed.
 
+An alternative approach is to use the [[css-conditional-5|CSS supports mechanism]] which can make selections based on font tech:
+
+<div class=example>
+<pre>
+@when font-tech(incremental) {
+  @font-face {
+    font-family: "MyCoolWebFont";
+    src: url("MyCoolWebFont-Incremental.otf");
+  }
+}
+@else {
+  @font-face {
+    font-family: "MyCoolWebFont";
+    src: url("MyCoolWebFont.otf");
+  }
+}
+</pre>
+</div>
+
 Note: Each individual <code>@font-face</code> block may or may not opt-in to IFT. This is due to the
 variety of ways fonts are used on web pages. Authors have control over which fonts they want to use
 this technology with, and which they do not.

Overview.html

@@ -6,7 +6,7 @@
   <meta content="WD" name="w3c-status">
   <meta content="Bikeshed version d765c696b, updated Fri Mar 8 15:58:52 2024 -0800" name="generator">
   <link href="https://www.w3.org/TR/IFT/" rel="canonical">
-  <meta content="71f3c5e17296fa19c21ee4ea9e6b7212b685bce3" name="revision">
+  <meta content="c2bf1c29bc0ddfb7ecf7382081365dbe4de446e5" name="revision">
   <meta content="dark light" name="color-scheme">
 <style>
 .conform:hover {background: #31668f; color: white}
@@ -1005,26 +1005,43 @@ <h2 class="heading settled" data-level="2" id="opt-in"><span class="secno">2. </
    <p>Web pages can choose to opt-in to incremental transfer for a font via the use of a CSS font tech
 keyword (<a href="https://www.w3.org/TR/css-fonts-4/#font-tech-definitions"><cite>CSS Fonts 4</cite> § 11.1 Font tech</a>) inside the ''@font-face'' block. The keyword <code>incremental</code> is used to indicate the referenced font contains IFT data and should
 only be loaded by a user agent which supports incremental font transfer.</p>
-   <div class="example" id="example-d6868efb">
-    <a class="self-link" href="#example-d6868efb"></a> 
+   <div class="example" id="example-e768eb0f">
+    <a class="self-link" href="#example-e768eb0f"></a> 
 <pre>@font-face {
     font-family: "MyCoolWebFont";
-    src: url("MyCoolWebFont.otf") tech(incremental);
+    src: url("MyCoolWebFont-Incremental.otf") tech(incremental);
 }
 </pre>
    </div>
-   <div class="example" id="example-04425b82">
-    <a class="self-link" href="#example-04425b82"></a> 
+   <div class="example" id="example-8a58c904">
+    <a class="self-link" href="#example-8a58c904"></a> 
 <pre>@font-face {
     font-family: "MyCoolWebFont";
-    src: url("MyCoolWebFont.otf") tech(incremental);
+    src: url("MyCoolWebFont-Incremental.otf") tech(incremental);
     unicode-range: U+0000-00FF;
 }
 </pre>
    </div>
    <p>As shown in the second example, <a href="https://www.w3.org/TR/css-fonts-4/#unicode-range-desc">unicode-range</a> can be used in conjuction with an IFT font. The
 unicode ranges should be set to match the coverage of the fully extended font. This will allow clients to avoid trying to load the IFT font
 if the font does not support any code points which are needed.</p>
+   <p>An alternative approach is to use the <a data-link-type="biblio" href="#biblio-css-conditional-5" title="CSS Conditional Rules Module Level 5">CSS supports mechanism</a> which can make selections based on font tech:</p>
+   <div class="example" id="example-439e65c2">
+    <a class="self-link" href="#example-439e65c2"></a> 
+<pre>@when font-tech(incremental) {
+  @font-face {
+    font-family: "MyCoolWebFont";
+    src: url("MyCoolWebFont-Incremental.otf");
+  }
+}
+@else {
+  @font-face {
+    font-family: "MyCoolWebFont";
+    src: url("MyCoolWebFont.otf");
+  }
+}
+</pre>
+   </div>
    <p class="note" role="note"><span class="marker">Note:</span> Each individual <code>@font-face</code> block may or may not opt-in to IFT. This is due to the
 variety of ways fonts are used on web pages. Authors have control over which fonts they want to use
 this technology with, and which they do not.</p>
@@ -3455,6 +3472,8 @@ <h3 class="no-num no-ref heading settled" id="normative"><span class="content">N
   </dl>
   <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
   <dl>
+   <dt id="biblio-css-conditional-5">[CSS-CONDITIONAL-5]
+   <dd>Chris Lilley; et al. <a href="https://www.w3.org/TR/css-conditional-5/"><cite>CSS Conditional Rules Module Level 5</cite></a>. 5 November 2024. WD. URL: <a href="https://www.w3.org/TR/css-conditional-5/">https://www.w3.org/TR/css-conditional-5/</a>
    <dt id="biblio-enabling-typography">[ENABLING-TYPOGRAPHY]
    <dd>John Hudson. <a href="https://tiro.com/John/Enabling_Typography_(OTL).pdf"><cite>Enabling Typography: towards a general model of OpenType Layout</cite></a>. April 15th, 2014. Note. URL: <a href="https://tiro.com/John/Enabling_Typography_(OTL).pdf">https://tiro.com/John/Enabling_Typography_(OTL).pdf</a>
    <dt id="biblio-fetch">[FETCH]