CSS3 Tutorial – Custom Fonts

Font embedding enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended. For browsers that font embedding, fonts can be temporarily installed on a user’s computer so that a Web page is displayed exactly as the you intend.

Microsoft has been supporting font-embedding since IE4 in 1997. And the feature is getting special attention in CSS3. You can see it in action in on this page.

Browsers that don’t support font embedding ignore the code that links the font objects to the page. Those using browsers that support font embedding will see text displayed in the selected font if it’s installed. Since Goudy Stout and Garamond come with Office, it’s possible the fonts may be installed. If the first-choice font isn’t available, the browser displays the text using the second- or third-choice fonts, if they are installed. Users of older browsers see all the text displayed using their default font.

In my case I want my h1 tag in my header to show off a custom font. My code takes this format.

@font-face {
     font-family: yourFontName ;
     src: url( /location/of/font/FontFileName.ttf ) format("truetype");
}
/* Then use it like you would any other font */ 
.yourFontClass { font-family: yourFontName , verdana, helvetica, sans-serif;

Learn more at Embedded Font Technology.

Most fonts are licensed from their original publishers, who may place additional restrictions on their use and distribution. For information about licensing arrangements for a given font, contact the original publisher. You can use a font like Pfennig which is licensed under the SIL Open Font License, Version 1.1 http://scripts.sil.org/OFL

	@font-face {
	font-family: Pfennig;
	src: url( /Content/Pfennig.ttf ) format("truetype");
	}

	/* Then use it like you would any other font */
	.Pfennig{ font-family: Pfennig, verdana, helvetica, sans-serif; }

	h1
	{
	font-size: x-large;
	vertical-align: middle;
	background: #C0C0C0;
	font-family: Pfennig;
	font-weight: 200;
	color: #000080;
	line-height: 100px;
	height: 75px;
	}

view raw

css-fonts-format.css

hosted with ❤ by GitHub

You can now embed fonts for IE6, IE7, IE8, FireFox 3.5+ (PC & Mac), Safari (PC & Mac) and Opera 10. More than 97.5 percent are now”cross-browser”. Truetype fonts work in IE7 and up, including IE9. For more legacy IE browsers you might want to use OpenType font file (having an EOT extension).

The nuances and workarounds for various browsers are described in an Expand Your Font Palette Using CSS3.

Online Fonts

You can also use online fonts for applications that have access to the Internet. Your link would use a href that points to a font.

	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
	<style>
	body {
	font-family: 'Tangerine', serif;
	font-size: 48px;
	}
	</style>