Which fonts support ligatures for the web?

[Braveheart4]

Now that we are no longer limited to using only web-safe fonts, there are many typefaces out there that support ligatures, but I wonder which fonts with ligatures can be used on the web? Of course, I first try to find the free ones, if any, and then look at the paid ones. I wonder if some of the fonts at Google have ligatures? Thanks!

[TechnoBear]

You can look at fonts on http://www.fontsquirrel.com. Use the “glyphs” tab on a font to see whether it contains what you need.

For example, this one does: http://www.fontsquirrel.com/fonts/corbert

[Braveheart4]

As far as I understand, the fonts needs to be in openType format so that ligatures can be enabled, unless I’m wrong?

I found one font, it has ligatures, downloaded the otf (openType) file, and then used the built-in generator to create the CSS code. Hope I’m doing it right.

[Gandalf]

Ideally you should provide the fonts in 4 different formats for flexibility. If a font includes ligatures it should be in all versions.

In your CSS you’ll have something along the lines of:

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-weight: 400;
    font-style: normal;
}

[Braveheart4]

Thank you!

[ralphm]

It’s worth checking out what you can do with CSS in this regard: http://www.sitepoint.com/cross-browser-web-fonts-part-3/#font-feature-settings

There’s some pretty cool stuff available now.

[Braveheart4]

This is very valuable. Thank you!