Custom Fonts with CSS3

Dan — Mon, 18 Jan 2010 22:52:18 +0000

One great thing about CSS3 is its typography facilities. With that comes the ability to use system fonts other than the safe-web fonts such as Arial/Helvetica, Times New Roman/Times, or Courier New/Courier. Actually, it’s been a feature since CSS2, but at that time, but not all browsers have been supporting the same type of font file. ( Man, why can’t browsers agree on *SOMETHING*.) You can read more about the font files that are supported (EOT, OTF, TTF), but for the most part, as always IE is the buzz-kill. Currently, most recent-versioned browsers support the TTF format except IE8.

Anywhoot, here’s a demo that loads a TTF Upside-down font and applies the font to a text area. It lets you type upside-down. Code is very simple:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Text</title>
<style type="text/css">
@font-face 
{
	font-family: "upsidedown_font";	
	src: url("http://www.shinylight.com/wp-content/uploads/2010/01/Stagdive.ttf");
}
 
textarea 
{
	font-family: "upsidedown_font", Arial; 
	font-size:48px;
}
</style>
 
</head>
 
<body>
<h3>Type stuff. It'll be upside down.</h3>
<p>Only supported in modern-versioned browsers. Not supported in IE8. </p>
<textarea cols="60" rows="10"></textarea>
</body>

ShinyLight Development » CSS

Custom Fonts with CSS3