Open the styles.css file in your text editor.

At the top of the file, add a @charset rule to set the encoding of this stylesheet to utf$-8.$

For the main page, the student government representatives want to use two main fonts:

Familjen Grotesk

Bebas Neue

The Bebas Neue font has no variations $($i$.$e$.$ no bold, italics or different font weights$)$ so we only need one @font$-$face rule.

For the Bebas Neue font, create a @font$-$face CSS rule that has the following properties:

The font should be called Bebas Neue.

The file to use is BebasNeue$-$Regular.ttf$.$

The Familjen Grotesk font, however has a bold variation, an italic variation, and a bold italic variation. In order to add all these variations to the page, we will have import the various font files we uploaded in the last step into our page.

For the Familjen Grotesk font, you will create a total of four $(4)$ @font$-$face rules using the following properties:

For each rule, the font should be called Familjen Grotesk.

For the first rule, the file to use is FamiljenGrotesk$-$Regular.ttf$.$ Set the weight and style to normal.

For the second rule, the file to use is FamiljenGrotesk$-$Italic.ttf$.$ Set the weight to normal and the style to italic.

For the third rule, the file to use is FamiljenGrotesk$-$Bold.ttf$.$ Set the weight to bold and the style to normal.

For the fourth rule, the file to use is FamiljenGrotesk$-$BoldItalic.ttf$.$ Set the weight to bold and the style to italic.