fix(curriculum): add section headers to external fonts lecture (#69353)

Signed-off-by: Daniel Armijo <76452481+darmijo15@users.noreply.github.com>
Co-authored-by: Somil Gumber <138715671+imsomilg@users.noreply.github.com>

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

@@ -11,6 +11,8 @@ An external font is a font file that is not included directly within your projec
 
 Google Fonts and Font Squirrel are popular online resources for finding and using free fonts for web development purposes. You can incorporate them into your projects very easily.
 
+## Google Fonts
+
 Let's start with Google Fonts. This is a Google service that offers a collection of fonts, many of which are designed specifically for web development. On the Google Fonts user interface, you can see many different elements. Let's go through them one by one. On the left sidebar, you will find:
 
 - A section to see, find, and filter fonts.
@@ -18,6 +20,8 @@ Let's start with Google Fonts. This is a Google service that offers a collection
 - A section where you can find and download icons for your web projects.
 - A section where you can learn more about fonts and their best practices, followed by frequently asked questions.
 
+## Previewing Google Fonts
+
 To add a Google Font to your website, you should go to the first section (Fonts). You can customize the preview text on the left sidebar, where it says "Preview." Just write the text that you would like to see and it will be updated automatically. This is helpful to preview the font with the text that you already have in mind for your website. You can also adjust the font size and filter the fonts based on their characteristics.
 
 <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-1.png" alt="Google Fonts Fonts section showing a left sidebar with preview text set to 'freeCodeCamp' at 40px, filter options for Language, Technology, and Decorative stroke, and the main panel listing font families including Roboto, SUSE, and Sevillana each previewing 'freeCodeCamp'" />
@@ -28,12 +32,16 @@ You can customize the font size of the preview text with the blue slider located
 
 <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-2.png" alt="Google Fonts Roboto Styles page with Specimen, Type tester, Glyphs, and About &amp; license tabs, a blue Get font button, a preview text field showing 'freeCodeCamp' with a font size slider at 48px, and a list of styles including Thin 100, Thin 100 Italic, Light 300, and Light 300 Italic" />
 
+## Using Google Fonts
+
 Once you're ready to add the font to your project, click on the blue "Get font" button at the top. You'll be taken to a summary page where you'll see the fonts that you currently have selected. You can have multiple fonts selected simultaneously.
 
 <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-3.png" alt="Google Fonts page showing '1 font family selected' with Roboto Static listed, Get embed code and Download all buttons on the right, and a How to use section with All, Design, Develop, and Google products tabs" />
 
 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.
 
+### Link Google Fonts
+
 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.
 
 <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-4.png" alt="Google Fonts Embed code page with the link element option selected, showing three link tags for preconnect and the font stylesheet, a CSS classes section with .roboto-thin, .roboto-light, .roboto-regular, and .roboto-medium rules, and a left sidebar showing font style toggles" />
@@ -141,6 +149,8 @@ Here is an example of using all Roboto styles:
 
 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.
 
+### Import Google Fonts
+
 If you choose the `@import` option instead, you will need to add that rule to your CSS file.
 
 <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-5.png" alt="Google Fonts Embed code page with the @import option selected, showing a style block containing the @import URL rule, a CSS classes section below, and the left sidebar with font style toggles" />
@@ -159,10 +169,14 @@ If you only want to include specific font styles, you also have the option to re
 
 And this is Google Fonts. It's one of the most popular options for finding free and open source fonts for web development projects.
 
+## Font Squirrel
+
 Another great option is Font Squirrel, where you can find and download the custom fonts that you envision for your design.
 
 <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-7.png" alt="Font Squirrel 'Free Font Utopia' page listing featured free fonts including Acherus Grotesque, Intro Rust, Source Sans Pro, Open Sans, and Questa, each shown with an alphabet specimen and a Download button" />
 
+## Previewing Font Squirrel
+
 If you search for a font and click on a result, you'll see more details about the font, including specimens, test drive, glyphs, and Webfont kit.
 
 <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-8.png" alt="Font Squirrel search results for 'Roboto' showing three matches: Roboto, Roboto 2014, and Roboto Slab, each with an alphabet specimen and a Download TTF button" />
@@ -173,6 +187,8 @@ You can also see samples of the different styles and variations of the font, lik
 
 <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-10.png" alt="Font Squirrel Roboto Specimens section listing all styles with alphabet samples: Roboto Thin, Thin Italic, Light, Light Italic, Regular, Italic, Medium, Medium Italic, Bold, Bold Italic, and Black, each in its respective weight" />
 
+## Using Font Squirrel
+
 Once you've decided on a font that you want to use in your project, go to the "Webfont Kit" tab. Here, you can check if the font's license allows you to use it in `@font-face` CSS embeddings. You can also choose the subset and format.
 
 <img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/how-do-you-work-with-external-fonts-like-font-squirrel-and-google-fonts-11.png" alt="Font Squirrel Roboto Webfont Kit tab showing a license notice confirming @font-face embedding is allowed, a subset selector set to Western Latin, format checkboxes with WOFF selected, and a Download @font-face Kit button" />