[css-font-loading] Added some more detail to the loadingdone example.

Author: tabatkins

css-font-loading/Overview.bs

@@ -763,27 +763,35 @@ API Examples</h2>
 		<strong>and</strong> text has been laid out without causing additional font loads:
 
 		<pre>
+			&lt;style>
 			@font-face {
 				font-family: latin-serif;
 				src: url(latinserif.woff) format("woff"); /* contains no kanji/kana */
 			}
-
 			@font-face {
 				font-family: jpn-mincho;
 				src: url(mincho.woff) format("woff");
 			}
+			@font-face {
+				font-family: unused;
+				src: url(unused.woff);
+			}
 
 			body { font-family: latin-serif, jpn-mincho; }
-
+			&lt;/style>
 			&lt;p>納豆はいかがでしょうか
 		</pre>
 
 		In this situation, the user agent first downloads “latinserif.woff”
-		and then tries to use this to draw the Japanese text.  But because no
-		Japanese glyphs are present in that font, fallback occurs and the font
-		“mincho.woff” is downloaded.  Only after the second font is downloaded
-		and the Japanese text laid out does the <a event>loadingdone</a>
-		event fire.
+		and then tries to use this to draw the Japanese text.
+		But because no Japanese glyphs are present in that font,
+		fallback occurs and the font “mincho.woff” is downloaded.
+		Only after the second font is downloaded and the Japanese text laid out does the <a event>loadingdone</a> event fire.
+
+		The "unused" font isn't loaded,
+		but no text is using it,
+		so the UA isn't even <em>trying</em> to load it.
+		It doesn't interfere witht he <a event>loadingdone</a> event.
 	</div>
 
 

css-font-loading/Overview.html

@@ -847,26 +847,34 @@ <h2 class="heading settled heading" data-level=5 id=font-load-event-examples><sp
 		The <a class=idl-code data-link-type=event href=#dom-fontfaceset-loadingdone title=loadingdone>loadingdone</a> event only fires after all font related loads have completed
 		<strong>and</strong> text has been laid out without causing additional font loads:
 
-		<pre>  @font-face {
+		<pre>  &lt;style&gt;
+  @font-face {
     font-family: latin-serif;
     src: url(latinserif.woff) format("woff"); /* contains no kanji/kana */
   }
-
   @font-face {
     font-family: jpn-mincho;
     src: url(mincho.woff) format("woff");
   }
+  @font-face {
+    font-family: unused;
+    src: url(unused.woff);
+  }
 
   body { font-family: latin-serif, jpn-mincho; }
-
+  &lt;/style&gt;
   &lt;p&gt;納豆はいかがでしょうか
 </pre>
 <p>		In this situation, the user agent first downloads “latinserif.woff”
-		and then tries to use this to draw the Japanese text.  But because no
-		Japanese glyphs are present in that font, fallback occurs and the font
-		“mincho.woff” is downloaded.  Only after the second font is downloaded
-		and the Japanese text laid out does the <a class=idl-code data-link-type=event href=#dom-fontfaceset-loadingdone title=loadingdone>loadingdone</a>
-		event fire.
+		and then tries to use this to draw the Japanese text.
+		But because no Japanese glyphs are present in that font,
+		fallback occurs and the font “mincho.woff” is downloaded.
+		Only after the second font is downloaded and the Japanese text laid out does the <a class=idl-code data-link-type=event href=#dom-fontfaceset-loadingdone title=loadingdone>loadingdone</a> event fire.
+
+<p>		The "unused" font isn’t loaded,
+		but no text is using it,
+		so the UA isn’t even <em>trying</em> to load it.
+		It doesn’t interfere witht he <a class=idl-code data-link-type=event href=#dom-fontfaceset-loadingdone title=loadingdone>loadingdone</a> event.
 	</div>