[css-fonts-4] Add Roel's font palette example #w3c#1103

Author: svgeesus

css-fonts-4/Overview.bs

@@ -6327,6 +6327,49 @@ User-defined font color palettes: The ''@font-palette-values'' rule</h3>
 	Each of these palettes are applied
 	to each @font-face that share a family name.
 
+	<div class="example">
+		I want to use two color fonts in a greenish palette.
+		The first font, Bixxxa, already has palette that I can use,
+		but for Bungeehee I need to overwrite one color
+		to get my green palette.
+
+		<pre class="lang-css">
+			@font-face {
+				font-family: Bixxxa;
+				src: url('./bixxxa.woff') format('woff');
+			}
+
+			@font-face {
+				font-family: Bungeehee;
+				src: url('./bungeehee.woff') format('woff');
+			}
+
+			@font-palette-values ToxicGreen {
+			  font-family: Bixxxa;
+			  base-palette: 3; /* This is Bixxxa's green palette */
+			}
+
+
+			@font-palette-values ToxicGreen {
+			  font-family: Bungeehee;
+			  base-palette: 7; /* This is Bungeehee's green palette... */
+			  2: lime; /* ...except this is pink, which I overwrite to lime */
+			}
+
+			h1 {
+				font-family: Bixxxa;
+				font-palette: ToxicGreen;
+			}
+
+			h2 {
+				font-family: Bungeehee;
+				font-palette: ToxicGreen;
+			}
+		</pre>
+
+		<em>Example by Roel Nieskens</em>
+	</div>
+
 	Note: In the case where a family name is shared
 	between multiple physical fonts,
 	(such as when a compound font is created, using `unicode-range`),
@@ -6337,6 +6380,24 @@ User-defined font color palettes: The ''@font-palette-values'' rule</h3>
 	In this case,
 	it is better to supply a complete palette definition.
 
+	<div class="example">
+		In the above example,
+		since two different font families have been set up
+		to have compatible named palettes,
+		one could go on to write
+
+		<pre class="lang-css">
+			h3 {
+				font-family: Bixxxa, Bungeehee;
+				font-palette: ToxicGreen;
+			}
+		</pre>
+
+		Which would correctly apply the desired palette
+		in each font
+		even though they have different palette numbers.
+	</div>
+
     A given set of ''@font-palette-values'' rules
     define which author-defined palettes are available for use
     within the documents that contain these rules.