Version 2-a

[Alpha]

Click the Logical Emphasis element “buttons” to preview <strong> and <em> for any of the samples below.
The real-time style changes are javascript dependent.

1, 2, 3, oops

Okay, so no one's perfect! However, it's no excuse to leave a job unfinished, or underdeveloped-- and as of now, this resource is in mid-changing. The stuff should still work though. Please let me contact me at learnatnovicenotesdotcom if necessary. I hope you enjoy the upgrade Universal Web Fonts cheat sheet.

Serif:

• Georgia, georgia, serif
• 'Palatino Linotype', 'Book Antiqua', Palatino, serif
• 'Times New Roman', Times, serif

Sans-Serif:

• Arial, Helvetica, sans-serif
• 'Arial Black', Gadget, sans-serif
• 'Lucida Sans Unicode', 'Lucida Grande', sans-serif
• Tahoma, Geneva, sans-serif
• 'Trebuchet MS', Trebuchet, sans-serif
• Verdana, Geneva, sans-serif

Cursive:

• 'Comic Sans MS', 'comic sans', cursive

Monotype:

• 'Courier New', Courier, monospace
• 'Lucida Console', Monaco, monospace
• 'Andale Mono', 'Monte Carlo', monospace

Fantasy²:

• Impact, Charcoal, sans-serif
• fantasy

Symbols:

• Symbol, Symbol (Symbol, Symbol)
• Webdings, Webdings (Webdings, Webdings)
• Wingdings, 'Zapf Dingbats' (Wingdings, 'Zapf Dingbats')

Exceptions^†:

• 'MS Serif', 'New York', serif ¹
• 'MS Sans Serif', Geneva, sans-serif ¹

Each item above is a CSS font-family property declaration, applying the common Windows font-family, then the Mac equivalent, and finally the generic font family for the default value.

How To:
Highlight the typeface names of your choice. Copy the entire line of text and Paste it into your own stylesheet.

NOTE: You may need to load the page in a new window, outside of the browser panel, to successfully use the "Edit: Copy and Paste" function.

(Linux standard fonts to come. Until then, learn more about Linux typography issues at sabi.co.uk, which includes links to download some of the free fonts available to Linux X-Server users.)

Be mindful of accessibility concerns by designing with CSS and Web Standards. Use i18n friendly fonts for greater locale support.

Font Preview Tool:
 Click Step 3 to DEMO

Step 1.)

<-- Select New Font --> Liberation Sans Liberation Serif Liberation Mono Bitstream Vera Sans Bitstream Vera Serif Bitstream Vera Sans Mono DejaVu Sans DejaVu Sans Condensed DejaVu Sans Light DejaVu Sans Mono DejaVu Serif DejaVu Serif Condensed Georgia Palatino Times New Roman Arial Arial Black Impact Lucida Sans Unicode Tahoma Trebuchet MS Verdana Comic Sans Courier New Lucida Console Andale Mono Symbol Webdings Wingdings Fantasy MS Serif MS Sans-Serif

Select from this list^† to change the CSS font-family property of the preview box (^†powered by JavaScript):

Fantasy

Step 2.)
Enter the text you want to preview:

Font-size: < - font-size - > smaller larger reset

 

Step 3.)
Place your custom text into the font preview dashed-box: Click to Preview

Step 4.)
[View Fantasy declaration Details ]
Copy and paste the values to your stylesheet…

Attention!: Font family names containing spaces (e.g. Lucida Sans Unicode) MUST be wrapped in quotes (i.e. text "in quotes") to ensure desired system decoding!

NoviceNotes.Net is proud to have the font-family reference included as a part of Rijk's Panelizer.

The Common Windows and Mac Fonts Browser Panel combines elements of CSS, JavaScript, and PHP to create the font preview tool. · © 2006-2007 J. Sabarese · http://novicenotes.net