feat(curriculum): add interactive examples to "How Do You Work with External Fonts Like Font Squirrel and Google Fonts?" lesson (#63120)

curriculum/challenges/english/blocks/lecture-working-with-css-fonts/672bd8453d1371fdb1510fe5.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts
 ---
 
-# --description--
+# --interactive--
 
 An external font is a font file that is not included directly within your project files. They're usually hosted on a separate server. A server is a computer that provides data or services to other computers over a network. You will learn more about servers in future lessons. External fonts give you more flexibility because you can use custom fonts that may not be installed on the user's device.
 
@@ -26,15 +26,32 @@ You can customize the font size of the preview text with the blue slider located
 
 Next, you have to choose if you would like to download the font files to add them to your project as local files or if you would like to use them as external fonts and download them from Google's servers when a user enters your website. Click on "Download all" if you want to download them but if you prefer to use them as external fonts on Google's servers, click on "Get embed code." If you click on "Get embed code," you'll see the instructions that you should follow to add these external fonts to your project.
 
-For web development projects, you have two options. You can either use a `link` element or `@import`. If you choose the `link` element option, you can copy and paste the HTML snippet and the CSS rules to add them to your project. You should embed the code in the `head` element of your HTML file and add the CSS rules that fit your needs. For example, this is what you would add to your HTML file to add all Roboto styles:
+For web development projects, you have two options. You can either use a `link` element or `@import`. If you choose the `link` element option, you can copy and paste the HTML snippet and the CSS rules to add them to your project. You should embed the code in the `head` element of your HTML file and add the CSS rules that fit your needs. 
+
+Here is an example of using all Roboto styles:
+
+:::interactive_editor
 
 ```html
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-```
+<link rel="stylesheet" href="styles.css">
 
-And this is the CSS:
+<p class="roboto-thin">roboto-thin</p>
+<p class="roboto-light">roboto-light</p>
+<p class="roboto-regular">roboto-regular</p>
+<p class="roboto-medium">roboto-medium</p>
+<p class="roboto-bold">roboto-bold</p>
+<p class="roboto-black">roboto-black</p>
+
+<p class="roboto-thin-italic">roboto-thin-italic</p>
+<p class="roboto-light-italic">roboto-light-italic</p>
+<p class="roboto-regular-italic">roboto-regular-italic</p>
+<p class="roboto-medium-italic">roboto-medium-italic</p>
+<p class="roboto-bold-italic">roboto-bold-italic</p>
+<p class="roboto-black-italic">roboto-black-italic</p>
+```
 
 ```css
 .roboto-thin {
@@ -110,6 +127,8 @@ And this is the CSS:
 }
 ```
 
+:::
+
 There's a CSS rule for each font style. Each rule assigns the custom fonts with fallback fonts in case the custom fonts are not loaded properly.
 
 If you choose the `@import` option instead, you will need to add that rule to your CSS file. Here is an example: