Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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 to walk you through it here. The first line says this will be an @font-face syntax that I'm declaring. The second line gives us the name of the font-family that says this is MuseoSans500Regular. The third line makes the syntax compatible for Internet Explorer 9 and higher.
The fourth line makes the syntax compatible for Internet Explorer 8. The next line, other recent browsers like Firefox and Chrome, will know where to go get the font files that they need. The next line will tell other older browsers where to get the font files that they need. And the last tells older iPhones and iPads where to get the font file they need. Then we have a font-weight: normal and a font-style: normal and then the declaration closes. You'll notice that even in the bold version that we're using, the font-weight is normal.
And even in the italic version we're using, the font-style is normal. Fontspring creates a separate font for each weight and style, then sets weight and style to normal. This increases support and avoids creating fake bolds and fake italics in Internet Explorer. It still works because the fonts themselves are bold and italic regardless of whether they're set to bold and italic in the @font-face declaration. Okay. So the @font-face syntax is a new document, let's go ahead and save that.
We've completed step one of the process. Next, we'll tell the browsers to actually use these fonts in the text. So keep this file for the next lesson.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 57717 Viewers
119 Video lessons · 67247 Viewers
84 Video lessons · 16633 Viewers
125 Video lessons · 29532 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.