jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-26 17:02:27 -04:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Diem-Trang Pham
2025-10-27 16:47:53 -05:00
committed by GitHub
parent ba0e5cd621
commit cbc7ac08c0
1 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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: