Font-family select box

I sometimes use this to quickly preview fonts.

-- choose a font --algerian amaze arial black arial unicode ms arial balthazar bart book antiqua bookman old style braggadocio britannic bold brush script mt century gothic century chicago colonna mt comic sans ms copperplate gothic bold courier cursive desdemona elephant fantasy footlight mt light futurablack BT futuralight BT garamond gaze geneva georgia georgia harrington helterskelter helvetica herman impact jester john handy LET jokerman LET lithograph lucida console map symbols marlett matisse ITC matteroffact matura mt script capitals mekanik LET monaco monospace palatino papyrus playbill poor richard puppylike rockwell roland sans-serif serif short hand showcard gothic simplex simpson stylus BT surfer symbol tahoma technic tempus sans ITC times new roman times trebuchet MS verdana victorian LET vineta BT vivian webdings western westminster westwood LET wide latin

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>

Comments

#1

Comment form

Name:
Comment:

Please type the word 'brown' here:

BB code available :

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