Font-family select box

I sometimes use this to quickly preview fonts.

javascript
function font() {
var ff=document.getElementById('fontfamily');
ff.onchange=function() {
if (this.value!=null) {
document.body.style.fontFamily=this.value;
}
}
}
window.onload=font;
HTML
<h1>Font-family select box</h1>
<p>I sometimes use this to quickly preview fonts.</p>
<p><select id="fontfamily">
<option>-- choose a font --</option><option style="font-family:algerian" id="algerian" value="algerian">algerian</option>
<option style="font-family:amaze" id="amaze" value="amaze">amaze</option>
<option style="font-family:arial black" id="arialblack" value="arial black">arial black</option>
<option style="font-family:arial unicode ms" id="arialunicodems" value="arial unicode ms">arial unicode ms</option>
<option style="font-family:arial" id="arial" value="arial">arial</option>
<option style="font-family:balthazar" id="balthazar" value="balthazar">balthazar</option>
<option style="font-family:bart" id="bart" value="bart">bart</option>
<option style="font-family:book antiqua" id="bookantiqua" value="book antiqua">book antiqua</option>
<option style="font-family:bookman old style" id="bookmanoldstyle" value="bookman old style">bookman old style</option>
<option style="font-family:braggadocio" id="braggadocio" value="braggadocio">braggadocio</option>
<option style="font-family:britannic bold" id="britannicbold" value="britannic bold">britannic bold</option>
<option style="font-family:brush script mt" id="brushscriptmt" value="brush script mt">brush script mt</option>
<option style="font-family:century gothic" id="centurygothic" value="century gothic">century gothic</option>
<option style="font-family:century" id="century" value="century">century</option>
<option style="font-family:chicago" id="chicago" value="chicago">chicago</option>
<option style="font-family:colonna mt" id="colonnamt" value="colonna mt">colonna mt</option>
<option style="font-family:comic sans ms" id="comicsansms" value="comic sans ms">comic sans ms</option>
<option style="font-family:copperplate gothic bold" id="copperplategothicbold" value="copperplate gothic bold">copperplate gothic bold</option>
<option style="font-family:courier" id="courier" value="courier">courier</option>
<option style="font-family:cursive" id="cursive" value="cursive">cursive</option>
<option style="font-family:desdemona" id="desdemona" value="desdemona">desdemona</option>
<option style="font-family:elephant" id="elephant" value="elephant">elephant</option>
<option style="font-family:fantasy" id="fantasy" value="fantasy">fantasy</option>
<option style="font-family:footlight mt light" id="footlightmtlight" value="footlight mt light">footlight mt light</option>
<option style="font-family:futurablack BT" id="futurablackBT" value="futurablack BT">futurablack BT</option>
<option style="font-family:futuralight BT" id="futuralightBT" value="futuralight BT">futuralight BT</option>
<option style="font-family:garamond" id="garamond" value="garamond">garamond</option>
<option style="font-family:gaze" id="gaze" value="gaze">gaze</option>
<option style="font-family:geneva" id="geneva" value="geneva">geneva</option>
<option style="font-family:georgia" id="georgia" value="georgia">georgia</option>
<option style="font-family:georgia" id="georgia" value="georgia">georgia</option>
<option style="font-family:harrington" id="harrington" value="harrington">harrington</option>
<option style="font-family:helterskelter" id="helterskelter" value="helterskelter">helterskelter</option>
<option style="font-family:helvetica" id="helvetica" value="helvetica">helvetica</option>
<option style="font-family:herman" id="herman" value="herman">herman</option>
<option style="font-family:impact" id="impact" value="impact">impact</option>
<option style="font-family:jester" id="jester" value="jester">jester</option>
<option style="font-family:john handy LET" id="johnhandyLET" value="john handy LET">john handy LET</option>
<option style="font-family:jokerman LET" id="jokermanLET" value="jokerman LET">jokerman LET</option>
<option style="font-family:lithograph" id="lithograph" value="lithograph">lithograph</option>
<option style="font-family:lucida console" id="lucidaconsole" value="lucida console">lucida console</option>
<option style="font-family:map symbols" id="mapsymbols" value="map symbols">map symbols</option>
<option style="font-family:marlett" id="marlett" value="marlett">marlett</option>
<option style="font-family:matisse ITC" id="matisseITC" value="matisse ITC">matisse ITC</option>
<option style="font-family:matteroffact" id="matteroffact" value="matteroffact">matteroffact</option>
<option style="font-family:matura mt script capitals" id="maturamtscriptcapitals" value="matura mt script capitals">matura mt script capitals</option>
<option style="font-family:mekanik LET" id="mekanikLET" value="mekanik LET">mekanik LET</option>
<option style="font-family:monaco" id="monaco" value="monaco">monaco</option>
<option style="font-family:monospace" id="monospace" value="monospace">monospace</option>
<option style="font-family:palatino" id="palatino" value="palatino">palatino</option>
<option style="font-family:papyrus" id="papyrus" value="papyrus">papyrus</option>
<option style="font-family:playbill" id="playbill" value="playbill">playbill</option>
<option style="font-family:poor richard" id="poorrichard" value="poor richard">poor richard</option>
<option style="font-family:puppylike" id="puppylike" value="puppylike">puppylike</option>
<option style="font-family:rockwell" id="rockwell" value="rockwell">rockwell</option>
<option style="font-family:roland" id="roland" value="roland">roland</option>
<option style="font-family:sans-serif" id="sans-serif" value="sans-serif">sans-serif</option>
<option style="font-family:serif" id="serif" value="serif">serif</option>
<option style="font-family:short hand" id="shorthand" value="short hand">short hand</option>
<option style="font-family:showcard gothic" id="showcardgothic" value="showcard gothic">showcard gothic</option>
<option style="font-family:simplex" id="simplex" value="simplex">simplex</option>
<option style="font-family:simpson" id="simpson" value="simpson">simpson</option>
<option style="font-family:stylus BT" id="stylusBT" value="stylus BT">stylus BT</option>
<option style="font-family:surfer" id="surfer" value="surfer">surfer</option>
<option style="font-family:symbol" id="symbol" value="symbol">symbol</option>
<option style="font-family:tahoma" id="tahoma" value="tahoma">tahoma</option>
<option style="font-family:technic" id="technic" value="technic">technic</option>
<option style="font-family:tempus sans ITC" id="tempussansITC" value="tempus sans ITC">tempus sans ITC</option>
<option style="font-family:times new roman" id="timesnewroman" value="times new roman">times new roman</option>
<option style="font-family:times" id="times" value="times">times</option>
<option style="font-family:trebuchet MS" id="trebuchetMS" value="trebuchet MS">trebuchet MS</option>
<option style="font-family:verdana" id="verdana" value="verdana">verdana</option>
<option style="font-family:victorian LET" id="victorianLET" value="victorian LET">victorian LET</option>
<option style="font-family:vineta BT" id="vinetaBT" value="vineta BT">vineta BT</option>
<option style="font-family:vivian" id="vivian" value="vivian">vivian</option>
<option style="font-family:webdings" id="webdings" value="webdings">webdings</option>
<option style="font-family:western" id="western" value="western">western</option>
<option style="font-family:westminster" id="westminster" value="westminster">westminster</option>
<option style="font-family:westwood LET" id="westwoodLET" value="westwood LET">westwood LET</option>
<option style="font-family:wide latin" id="widelatin" value="wide latin">wide latin</option>
</select></p>
Comment form

Please type the word 'gorilla' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url