Once you find a font that has the aesthetic features you want, also check to make sure you can legally use that font for the web. A quick glance at the License for Ponsi Rounded Slab sadly reveals that it is not licensed for use on the web with @font-face. At least not for free. If you particularly like Ponsi Rounded Slab, you can always contact Font Spring to investigate legal usage further.

While Font Spring has some good full-featured type choices, we’ve had some good luck searching Behance to get amazing font families directly from their creators. To name just a few that we’ve fallen in love with, there’s Argent, Quincy, and Calendas Plus. Google Fonts does also have some fonts available with a least some ligatures built in, though you might spend some time hunting (try changing your preview text to “fi ff fk” to spot fonts with ligatures).

Prepping Font Files for the Web

Once you have a typeface that works for you, both aesthetically and legally, then you can move on to prepping the font files for the web (if it’s not a web font already, like from Google Fonts or TypeKit). So, the catch with all of these OpenType features is they’re only available when working with the OpenType font file type (.otf). Swashes, style alternates, and other font variations won’t work with other font-file types: eot, woff, svg, or ttf. At least they won’t by default.

Woff to the Rescue

The big savior here is the woff file type, which can use all the same font features as .otf files, if the woff file is exported correctly. In order to export your woff (and woff2) correctly:

Open up Font Squirrel’s Webfont Generator Upload the .otf version of your selected font Enter “Expert” font-optimization mode (Optional) Limit font file types. Woff and Woff2 cover most of your bases these days Under OpenType Features, use the Comma Feature List to note all of the features you would like to keep in your font. You could use Keep All Features, but keep in mind that more features mean a larger font file YOU CAN LEGALLY USE THIS FONT, RIGHT? Download Your Kit

Example:

For the White House Historical Association, we used Calendas Plus. We chose to use the ligatures, swashes, and small-caps from the font, so I entered “liga, swsh, smcp” as my Comma Feature List. Most of the other default settings are good to leave alone. Here’s a run-down of the full settings I exported my font files with: