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 as a single format, in this case, TTF. You can use a tool such as Google Web Fonts Helper to generate additional file types for WOFF and WOFF2.
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!
@font-face { font-family: 'MyParagraphFont'; src: url('fonts/Roboto.woff2') format('woff2'), url('fonts/Roboto.woff') format('woff'), url('fonts/Roboto.ttf') format('truetype'); }
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 namedfonts
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!
p { font-family: 'MyParagraphFont', sans-serif; }
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
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.
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'
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.