Custom Fonts with CSS3
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
Categories
