Setting up @font-face


show more Setting up @font-face provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver show less
please wait ...

Setting up @font-face

The key to web fonts is the @font-face declaration. This small bit of CSS code allows you to incorporate nonstandard fonts into your web page. With the @font-face declaration, you can change headings like this into headings like this. Let's go through it step by step. So I'm going to go over to main.css, and let's just go straight into Code View and scroll down past the opening comments there, and we'll put-in our @font-face declaration right at the top of all of our other CSS rules.

So we start with @font-face and then open up a curly brace, and I'll just close that out so that we have a complete statement, and now we enter-in a font-family property. Now the name of the font that you enter here is the name you'll use when you're inserting it into the CSS rules as part of other font families. I'll put this in quotes, and the name is DragonwickFGRegular.

We'll close that off with a semicolon. We want to find the source for this font. It is a local file tha...

Setting up @font-face
Video duration: 6m 13s 2h 30m Intermediate

Viewers:

Setting up @font-face provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver

Subject:
Web
Software:
Dreamweaver
Author:
please wait ...