Adding font-faces in CSS3

Written by Tony Lea on Jul 22nd, 2010 Views Report Post

The common fonts used for web development are all very boring (Arial, Verdana, Times, Helvetica, etc...). Using the font-face attribute in CSS3 you can specify fonts to be used on your site. This means you can use a true-type font face located on your server; however, you will have to be cautious about licensing issues. Be sure to check out the following link to learn more about font face licensing: http://www.fonts.com/FontServices/FontEmbedding.htm. Okay, so to embed a font on your page, you will want to obviously make sure that you have added the font file to your web server, then you will need to link to the file from your CSS file:

@font-face{
	font-family: 'BleedingCowboys';
	src: url('../../../go/fonts/bleeding-cowboys.ttf') format('truetype');	
}

@font-face{
	font-family: 'BirthOfAHero';
	src: url('../../../go/fonts/birth-of-a-hero.ttf') format('truetype');	
}

Then in your html you can add:

<p style='font-family:BleedingCowboys; font-size:22px;'>This is the Bleeding Cowboys Font Face</p>
<p style='font-family:BirthOfAHero; font-size:22px;'>This is the Birth Of A Hero Font Face</p>

If your browser does not support the font-face attribute, then the above will be displayed as a default font.

Comments (0)