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