Adding typeface names (and links) to Nick’s article

diff --git a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md
index 155f11fe0801ecebddce1d45b4119b3e2979f167..a0488d676b0587138a5333d7a229546096e4277f 100644 (file)
--- a/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md
+++ b/cc-by-sa/knowledge/modules/using_variable_fonts_on_the_web/lessons/interactive_animations_with_variable_fonts/content.md
@@ -9,7 +9,7 @@ For a simple example of hover interaction, let’s consider hyperlinks that chan
 ![An animated loop showing the effects of the styling discussed in the preceding text.](images/4_1.gif)
 
 </figure>
-<figcaption>Basic weight change on hover.</figcaption>
+<figcaption>Basic weight change on hover. Typeface: <a href="https://fonts.google.com/specimen/Newsreader">Newsreader</a>.</figcaption>
 
 The effect is rather sudden, switching between weights instantly on hover. With variable fonts, though, it’s possible smooth the effect using a simple transition:
 
@@ -40,13 +40,14 @@ For more demanding situations where shifts in positioning aren’t acceptable at
 ![An animated loop showing how text shifts when using non-multiplexed fonts.](images/4_4a.gif)
 
 </figure>
+<figcaption>Typeface: <a href="https://fonts.google.com/specimen/Newsreader">Newsreader</a>.</figcaption>
 
 <figure>
 
 ![An animated loop showing how no text shifts when using multiplexed fonts.](images/4_4b.gif)
 
 </figure>
-<figcaption>Multiplexed fonts prevent shifts in the layout by maintaining the same width requirements across variants.</figcaption>
+<figcaption>Multiplexed fonts prevent shifts in the layout by maintaining the same width requirements across variants. Typeface: <a href="https://fonts.google.com/specimen/Recursive">Recursive</a>.</figcaption>
 
 On a related note, some variable fonts also offer a “[grade](/glossary/grade_axis)” axis separate from (and often in addition to) the standard [weight](/glossary/weight_axis) axis. This allows for multiplexed adjustments to a typeface’s apparent weight even if its standard weight axis would otherwise affect spacing.
 
@@ -61,7 +62,7 @@ Multiplexing isn’t limited to just standard variations in weight or grades eit
 ![An animated loop showing the way different elements of the type’s design can be manipulated.](images/4_5.gif)
 
 </figure>
-<figcaption>Multiplexed hover animations with variations other than standard weight.</figcaption>
+<figcaption>Multiplexed hover animations with variations other than standard weight. Typeface: Cheee Variable.</figcaption>
 
 Finally, for other special interactive effects, keep in mind that `:hover` isn’t limited to just hyperlinks. For example, you can wrap arbitrary elements in their own `span` elements and use that for triggering hover effects. You can also tweak the timing of a transition to make it faster or slower:
 
@@ -69,6 +70,6 @@ Finally, for other special interactive effects, keep in mind that `:hover` isn
 
 ![An animated loop showing how each letter drips with a slime-like effect when the user hovers over them.](images/4_6.gif)
 
-<figcaption>Multiplexed hover effects with more expressive variations, on a letter-by-letter basis.</figcaption>
+<figcaption>Multiplexed hover effects with more expressive variations, on a letter-by-letter basis. Typeface: Cheee Variable.</figcaption>
 
 Interactivity is a virtually infinite space for experience design, and variable fonts offer that much more room for exploration. For more ideas on using variable fonts, see the [other articles listed under the topic of variable fonts](https://fonts.google.com/knowledge/topics/variable_fonts).