Want to preview your own header text? Just edit any box and hit "Return" to update. Paragraph text is static.
Ideal Font
Start by choosing your ideal font, often the least-commonly available in the stack. You can leave this (or any other) field blank if your ideal font is also on one of the other lists.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
n/a
percent of users will have this font
Mac Option
Next, choose a fallback for Mac users (roughly 12% market share). The "Mac Option" menu lists fonts known to be installed by default on the majority of Mac computers (90%+) as well as Mac-specific versions of several common fonts.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
n/a
percent of users will have this font
Windows Option
Now, choose a fallback for Windows users (roughly 85% market share). The "Windows Option" menu lists fonts known to be installed by default on the majority of Windows computers (90%+) as well as Windows-specific versions of several common fonts.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
n/a
percent of users will have this font
Linux Option
And last, a fallback for Linux users (roughly 3% market share). The "Linux Option" menu lists fonts known to be installed by default on the majority of Linux computers (90%+). Because most people using this site will not have Linux fonts installed, I limited the list to those that were open-source and able to be embedded in this page for preview. Many Linux users will have various fonts from the Windows and Mac lists installed as well.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
n/a
percent of users will have this font
Web-Safe Font
"Web-Safe Fonts" are fonts that are installed on nearly all computers by default. Those on this list are available to 99% of Windows and Mac users, and at least 70% of Linux users.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
n/a
percent of users will have this font
Default
Last of all, specify a general fallback for the tiny percentage of users who do not even have the "Web-Safe" fonts available. This tells the system to just display its defaut serif, sans-serif, or monospace font.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
n/a
percent of users will have this font
Voila! Here's your CSS:
Credits

Information for this page is compiled from various resources, with particular debt to Sitepoint's "8 Definitive Font Stacks" and A Way Back's "Revised Font Stacks".
Font share percentages are provided as a general guideline only - they are calculated based on operating system market share and a combination of font share surveys from Visibone and Codestyle. This data is (more or less) current as of November 2011.

Many of the font options in the lists above are served from Fonts.com, and several others are embedded via @font-face (thanks to Font Squirrel's Generator).

Site design © Erin Lawrence, 2011. Contact.