opentype font list

What is OpenType font?
OpenType fonts include an expanded character set and typographic layout features, providing broader linguistic support and more precise typographic control. Based on Unicode, the international encoding standard that covers virtually all of the world's languages, OpenType fonts make multilingual typography easier.
Can I use OpenType outlines in a single font?
Both Microsoft and Adobe recommend against mixing outline formats within a single font. Choose the format that meets your feature requirements. OpenType fonts may have the extension .OTF, .TTF, .OTC or .TTC, depending on the type of outlines in the font and the desired backwards compatibility.
How do I find OpenType features?
In the Character Set section, check the OpenType Features box. When the box is checked, you'll see a list of the features available for that particular web font family, such as ligatures, alternate characters, or small capitals. The list shows OpenType features which are available in all the weights and styles of the family.
Does OpenType support TrueType Collections?
Since at least version 1.4, the OpenType specification had supported "TrueType Collections", a feature of the format that allows multiple fonts to be stored in a single file. Such a format is useful for distributing an entire typeface (font family) in just one file.

Overview

Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and several others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and low-level control properties — font-feature-settings. This article provides you with all you need to know about using OpenType font features in CSS. Some fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the designer or developer to choose to enable in specific scenarios. developer.mozilla.org

Discovering availability of features in fonts

This is sometimes the trickiest thing to work out if you don't have any documentation that came with the fonts (many type designers and foundries will provide sample pages and CSS just for this very reason). But there are some sites that make it easier to figure out. You can visit wakamaifondue.com, drop your font file on the circle where instructe

Why you would use them?

Given that these features take a bit of work to discover and use, it may seem a fair question to ask why one would bother to use them. The answer lies in the specific features that will make a site more useful, readable, and polished: •Ligatures like 'ff' or 'fi' make letter spacing and reading more even and smooth. •Fractions can make home improvement and recipe sites much easier to read and understand. •Numerals within paragraphs of text set as 'oldstyle' sit more comfortably between lower-case letters, and likewise setting them as 'tabular numbers' will make them line up better when setting a list of costs in a table say. 'lining' figures on the other hand sit more uniformly on their own or in front of capitalized words. While none of these features individually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail. OpenType features are like secret compartments in fonts. Unlock them and you'll find ways to make fonts look and behave differently in subtle and dramatic ways. Not all OpenType features are appropriate to use all of the time, but some features are critical for great typography. -- Tim Brown, Head of Typography at Adobe. developer.mozilla.org

The font features

Kerning Associated CSS property: font-kerning This refers to the spacing between specific glyph pairings. This is generally on by default (as recommended by the OpenType specification). It should be noted that if letter-spacing is also set on your text, that is applied after kerning. Alternates Associated CSS property: font-variant-alternates Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied. The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the @font-feature-values at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally In this case, @stylistic(alternates) will show all the alternate characters for either font). Applying this to just the word 'My' alters the way the 'M' renders, and applying @styleset(alt-a) only changes the lower case 'a'. Try changing the line to and notice that the lower case 'a' reverts to its regular form and the lower case 'g's changes instead. Ligatures Associated CSS property: font-variant-ligatures Ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective). Some of the most common are letters like 'fi', 'fl', or 'ffl' — but there are many other possibilities. There are the most frequent ones (referred to as common ligatures), and there are also more specialized categories like 'discretionary ligatures', 'historical ligatures', and 'contextual alternates'. While these last ones are not technically ligatures, they are generally similar in that they replace specific combinations of letters when they appear together. While more common in script typefaces, in the below example they are used to create arrows: developer.mozilla.org

Font feature settings

font-feature-settings is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using CSS custom properties to set the values). Because of this, it's best to use the standard properties shown above wherever possible. There are a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them. The general syntax looks like this: According to the specification you can either supply just the 4-character feature code or supply a 1 following the code (for enabling that feature) or a 0 (zero) to disable it. This is helpful if you have a feature like ligatures enabled by default but you would like to turn them off like so: developer.mozilla.org

Using CSS feature detection for implementation

Since not all properties are evenly implemented, it's good practice to set up your CSS using feature detection to utilize the correct properties, with font-feature-settings as the fallback. For example, small caps can be set several ways, but if you want to ensure that no matter what the underlying capitalization is that you end up with everything in small caps, it requires 2 settings with font-feature-settings versus a single property value using font-variant-caps. developer.mozilla.org