Just a couple weeks ago we introduced WebFontsPreview.com – a handy tool for previewing Web fonts on the website of your choice without touching the code. This week we’ve enhanced the utility with a suite of advanced options.
The new features include the ability to select individual text components to display using Web fonts. We’ve also added text layout controls, text effects and given visibility into the resulting style sheet. Here’s a rundown on what’s new:
Select Element: Click this button to select an individual text component. Once selected, you can modify the typeface or layout of the text selection. The original version of the tool (which can be seen in “Simple” mode), made some assumptions about which text elements were headings and which were body copy. The select element tool allows you to change exactly what you want you want and nothing you don’t.
Font size, line height and letter spacing: Use these sliders to adjust the text size, line spacing and letter spacing of a text selection.
Text effects: Apply a variety of text shadow effects ranging from subtle to bold to your selected text with the click of one of these buttons.
Show CSS: Like the results of your experimentation? The Show CSS button will reveal the CSS language necessary to recreate the look on your own.
As a reminder, WebFontsPreview.com employs techniques that will work on most, but not all sites. The tool was designed to make it fun and easy to experiment with Web fonts. These new controls will help you take your explorations even further – all without getting your hands dirty. Go ahead and give it a spin and let us know what you think.