A JavaScript web tool intended to help pick web-safe fonts for designing. Includes a list of various standard and Google web fonts categorized by font families.
Use the preview pane to interactively change and customize the font and CSS such as size, style, and weight. The preview pane includes various heading sizes, numbers/symbols, and basic paragraph text to show how all characters will display in the selected font.
Dynamic Interface
JS DOM Events
Accordion
- Either select a font from one of the font-family lists, or type in a font name to display the font in the preview pane.
- Customize the headings or text with the customization buttons below the preview pane. Note that due to the limitations of some fonts, not all fonts allow for customization.
- Bodoni MT
- Book Antiqua
- Calisto MT
- Cambria
- Cherry Swash
- Garamond
- Georgia
- Goudy Old Style
- Lucida Bright
- Perpetua
- Purple Purse
- Rockwell
- Times New Roman
- Arial
- Arial Black
- Arial Narrow
- Arial Rounded MT
- Calibri
- Candara
- Century Gothic
- Cherry Cream Soda
- Comic Sans MS
- Franklin Gothic
- Helvetica
- Impact
- Gill Sans MT
- Segoe UI
- Tahoma
- Trebuchet MS
- Verdana
- Consolas
- Courier
- Lucida Console
- Lucida Sans Typewriter
- Monospace
- Noto Sans Mono
- Nova Mono
- Share Tech Mono
- Xanh Mono
- Bonbon
- Brush Script MT
- Cookie
- Dancing Script
- Dr Sugiyama
- Emilys Candy
- Lucida Handwriting
- Princess Sofia
- Sacramento
- Tangerine
- Audiowide
- Barrio
- Creepster
- Eater
- Grenze Gotisch
- Griffy
- Henny Penny
- Irish Grover
- Margarine
- Metamorphous
- Mystery Quest
- Mountains of Christmas
- New Rocker
- Papyrus
- Permanent Marker
- 'Press Start 2P'
- Ribeye
- Ribeye Marrow