Adding the @font-face syntax to the CSS


show more Adding the @font-face syntax to the CSS provides you with in-depth training on Design. Taught by Laura Franz as part of the Choosing and Using Web Fonts show less
please wait ...

Adding the @font-face syntax to the CSS

Now that we have our Web font files, let's get our @font-face syntax into our CSS. First, let's make our document. In the Exercise Files, you can open up the original Arial site with your text editor and let's save that as museo_sans_site, and we can save that in the same folder since we won't be rewriting anything.

Now, let's go get the CSS syntax that we need. Downloads, we can go to Museo Sans 500, into Web fonts, and I'm looking for the stylesheet.css. So open that up and we can see here that we have the vendor information and then we also have the @font-face syntax, which is what we need. Let's go ahead and copy all of that and then in the Museo Sans site, in the CSS section of the HTML document, right above the universal selector, we can paste that.

And we now have the CSS in for the Museo Sans 500 Regular. Now let's get the @font-face syntax in for the other two weights and styles. Now looking at this syntax, each one is very similar, I'm going ...

Adding the @font-face syntax to the CSS
Video duration: 2m 57s 6h 52m Appropriate for all

Viewers:

Adding the @font-face syntax to the CSS provides you with in-depth training on Design. Taught by Laura Franz as part of the Choosing and Using Web Fonts

Subjects:
Design Web
Author:
please wait ...