freeCodeCamp/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md

---
id: 615f34ecc1091b4fd5a8a484
title: Step 4
challengeType: 0
dashedName: step-4
---

# --description--

Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.

This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`.

Also add a `link` element to link your `styles.css` file.

# --hints--

You should have two `link` elements.

```js
assert(code.match(/<link/g)?.length === 2);
```

Both of your `link` elements should have the `rel` attribute set to `stylesheet`.

```js
assert(code.match(/<link[\s\S]*?rel=('|"|`)stylesheet\1/)?.length === 2);
```

One of your `link` elements should have an `href` attribute set to `./styles.css`.

```js
assert(code.match(/<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/g)?.length === 1);
```

One of your `link` elements should have an `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.

```js
const links = [...document.querySelectorAll('link')]
assert(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
```

# --seed--

## --seed-contents--

```html
--fcc-editable-region--
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Nutrition Label</title>

  </head>
  <body>
    <h1>Nutrition Facts</h1>
    <p>8 servings per container</p>
    <p>Serving size 2/3 cup (55g)</p>
  </body>
</html>
--fcc-editable-region--
```

```css

```
feat: nutrition label (#43852) * feat: initial infra * feat: break down steps * feat: tests 1-30 * feat: tests 31 to end * chore: apply gikf's review suggestions Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * feat: actually testing things helps * chore: apply review suggestions Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: take the part, put it in a step * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: missed one Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: clarify verbiage Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> 2021-11-03 01:13:47 -07:00			`---`
			`id: 615f34ecc1091b4fd5a8a484`
			`title: Step 4`
			`challengeType: 0`
			`dashedName: step-4`
			`---`

			`# --description--`

			Within your `head` element, add a `link` element with the `rel` attribute set to `stylesheet` and the `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.

			This will import the `Open Sans` font family, with the font weight values `400`, `700`, and `800`.

			Also add a `link` element to link your `styles.css` file.

			`# --hints--`

			You should have two `link` elements.

			```js
			`assert(code.match(/<link/g)?.length === 2);`
			```

			Both of your `link` elements should have the `rel` attribute set to `stylesheet`.

			```js
			assert(code.match(/<link[\s\S]*?rel=('\|"\|`)stylesheet\1/)?.length === 2);
			```

			One of your `link` elements should have an `href` attribute set to `./styles.css`.

			```js
			assert(code.match(/<link[\s\S]*?href=('\|"\|`)(\.\/)?styles\.css\1/g)?.length === 1);
			```

			One of your `link` elements should have an `href` attribute set to `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.

			```js
			`const links = [...document.querySelectorAll('link')]`
			`assert(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));`
			```

			`# --seed--`

			`## --seed-contents--`

			```html
			`--fcc-editable-region--`
			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8">`
			`<title>Nutrition Label</title>`

			`</head>`
			`<body>`
			`<h1>Nutrition Facts</h1>`
			`<p>8 servings per container</p>`
fix: new practice project tests (#44554) * fix accessibility-quiz and reg-form tests (cherry picked from commit 467f0b3e7881887957a997c41596c69ebc2df421) * fix: registration-form tests * fix: ferris wheel tests * fix: photo-gallery tests * fix: magazine tests (cherry picked from commit 5831c2345d0c9a099963102a0584f63e65fe21c4) * fix: picasso tests * fix: piano tests * fix: magazine and nutrition tests * fix: again magazine...I am doing this in sill order * chore: resolve discrepancies with tests (cherry picked from commit a7b5e031df32f5b9d6b235f69bbb19faf7105165) * fix: the stuffs...I am tired * fix: oops (cherry picked from commit 05ff55a0365f73fb20105df244764aa01bcb07b3) * fix: add missing solutions (cherry picked from commit 61fa23fc70e0ab22580f25e9f245c7882444b8eb) Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com> 2021-12-22 16:16:59 +00:00			`<p>Serving size 2/3 cup (55g)</p>`
feat: nutrition label (#43852) * feat: initial infra * feat: break down steps * feat: tests 1-30 * feat: tests 31 to end * chore: apply gikf's review suggestions Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * feat: actually testing things helps * chore: apply review suggestions Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: take the part, put it in a step * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: missed one Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * chore: clarify verbiage Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> 2021-11-03 01:13:47 -07:00			`</body>`
			`</html>`
			`--fcc-editable-region--`
			```

			```css

			```