Web Fonts Using @font-face

Fonts can also be added using a @font-face ruleset in your CSS stylesheet instead of using a <link> element in your HTML document. As mentioned earlier, fonts can be downloaded just like any other file on the web. They come in a few different file formats, such as:

• OTF (OpenType Font)

• TTF (TrueType Font)

• WOFF (Web Open Font Format)

• WOFF2 (Web Open Font Format 2)

The different formats are a progression of standards for how fonts will work with different browsers, with WOFF2 being the most progressive. It’s a good idea to include TTF, WOFF, and WOFF2 formats with your @font-face rule to ensure compatibility on all browsers.

Let’s take a look at how to use @font-face using the same Roboto font as before:

Within the “Selected Families” section, you can use the “Download” button to download the font files to your computer. The files will be downloaded in a single format, in this case, TTF. You can use additional tools to generate additional file types for WOFF and WOFF2, check out MDN’s list of font generators for more information.

When you have the files you need, move them to a folder inside your website’s working directory, and you’re ready to use them in a @font-face ruleset!

Let’s take a look at the example above, line by line:

• The @font-face at-rule is used as the selector. It’s recommended to define the @font-face ruleset at the top of your CSS stylesheet.

• Inside the declaration block, the font-family property is used to set a custom name for the downloaded font. The name can be anything you choose, but it must be surrounded by quotation marks. In the example, the font is named 'MyParagraphFont', as this font will be used for all paragraphs.

• The src property contains three values, each specifying the relative path to the font file and its format. In this example, the font files are stored inside a folder named fonts within the working directory.

• Note that the ordering for the different formats is important because our browser will start from the top of the list and search until it finds a font format that it supports. Read more on format prioritization on CSS-Tricks.

Once the @font-face at-rule is defined, you can use the font in your stylesheet!

Like using any other fonts, you can use the font-family property to set the font on any HTML element. The downloaded font can be referenced with the name you provided as the font-family property’s value in the @font-face ruleset—in this case, 'MyParagraphFont'.

Instructions

1.Let’s change the font of the banner using local font files. If you open up the fonts/ directory using the file navigator in the code editor, you’ll notice that we have added local font files Glegoo-Regular.woff2, Glegoo-Regular.woff, Glegoo-Regular.ttf.

At the top of style.css, create a @font-face ruleset and give it the font-family property and 'GlegooBanner' as its value.

2. Within the @font-face rule, add a src property with the following paths and formats as values, in the following order:

• url('../fonts/Glegoo-Regular.woff2') and a format of 'woff2'

• url('../fonts/Glegoo-Regular.woff') and a format of 'woff'

• url('../fonts/Glegoo-Regular.ttf') and a format of 'truetype'

3. Inside the .banner p ruleset, add a declaration that sets the font family to 'GlegooBanner', with a font size of 20px.

Press “Run” to see the changes in the browser.