@font-family property - Purpose of: """format('example');""" after url

Hi All,

I was wondering if there was a quick explanation for the purpose of format(‘example’); after the URL when linking in fonts using the @font-face property in CSS.

For instance in this lesson here: https://www.codecademy.com/courses/learn-css/lessons/css-typography/exercises/font-face-iii?action=resume_content_item

Any help would be greatly appreciated. Thanks!

Andy

1 Like

Hey there @anightingale, welcome to the forums!

Good question.

There’s a few ways that you can introduce a new typeface, or font, in to your CSS.

One way is to use a web-based resource, like Google Fonts or Adobe Fonts. They provide you with a pre-prepared block of code to add to your HTML to include the font, or fonts, you want to use.

If, say, you don’t want to rely on a third-party to provide the font - let’s say you’ve designed a great typeface of your own which you want to use - you can host the font files locally on your web server and serve them from there.

In that case, since we’re hosting the fonts locally on the server, we can include the font with the @font-face declaration in the CSS and point the src attribute to the appropriate font file. Like so:

@font-face {
  font-family: "Roboto";
  src: url(fonts/Roboto.woff2) format('woff2'),
       url(fonts/Roboto.woff) format('woff'),
       url(fonts/Roboto.tff) format('truetype');
}

The reason we need to include format('woff2'), for example, is because fonts come in a variety of formats. In the code segment above, we’re including the Roboto font, and providing three different formats for the browser to choose from - woff2 and woff are Web Open Font Format files, and truetype is a TrueType font. (There’s also an OpenType format.)

You need to tell the browser what format the font is in, because not all browsers support all font formats. For example, to the best of my knowledge right now, neither Internet Explorer nor Safari support WOFF2 fonts so you need an alternative - like WOFF, or TrueType.

Hope that explains it a bit better, but if you’re still confused (or I’ve made it worse) let us know. :slight_smile: