curriculum/challenges/english/blocks/workshop-nutritional-label/615f34ecc1091b4fd5a8a484.md
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.
Your code should have two link elements.
assert.strictEqual(document.querySelectorAll('link').length, 2);
Your link elements should be void elements, they should not have an end tag </link>.
assert.notMatch(code, /<\/link>/);
Your two link elements should be inside the head element.
const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
const headElementContent = code.match(headContentRegex);
const headElement = document.createElement("head");
headElement.innerHTML = headElementContent;
assert.strictEqual(headElement.querySelectorAll('link').length, 2);
Both of your link elements should have the rel attribute set to stylesheet.
const links = [...document.querySelectorAll('link')];
assert.isTrue(links.every(link => link.getAttribute('rel') === 'stylesheet'));
One of your link elements should have an href attribute set to styles.css.
const styleElement = document.querySelector('[data-href]');
assert.isNotNull(styleElement);
One of your link elements should have an href attribute set to https://fonts.googleapis.com/css?family=Open+Sans:400,700,800.
const links = [...document.querySelectorAll('link')];
assert.exists(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
--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--