Assignment029i2b

Using Fonts with CSS3 - ESLRs

In ancient times, a brave powerful warrior named Chagoyan ruled the realms. With his mighty dragons, Ajax the Black Scourge, and Pixel the Potent Pup, the three realms groveled at his feet.


CSS3 offers a new way of making fonts available on your website. You can now use a font file (.ttf, .otf, or .eot) as the source for your online fonts. Just upload your font file and use the following code in your style section:

@font-face
{
font-family: AnyNameYouWant;
src: url('firstv2.ttf');
}

The above code creates a font-family you can use on your web page. The font-family imports the font file 'firstv2.ttf' for use.

Note: You can name your font-family whatever you choose. In my example, I named it AnyNameYouWant. It's best to name it after the font name.

Once you have the above code in your CSS, you can now use the font anywhere in your CSS. Here's an example of using the @font-face font specified above:

p#intro
{
font-family:AnyNameYouWant, Verdana, Geneva, sans-serif;
font-size:72px;
}

Always provide backup fonts just in case the user's browser doesn't support @font-face.

 

Here's the file structure:

file structure

Here's an online guide: Six Revisions

To earn credit for this assignment, change the text to the following:

ESLRS