OpenType features in CSS

Applying OpenType features in webfonts is a two step process. Typotheque webfonts are always generated for a specific webfonts, based on the requested language coverage and by default the OpenType features are removed. First, we need to make sure that the characters needed for the OpenType substitution are available.

Login to your Typotheque account and go to the My Webfonts section, click to Edit the Webfont project, and click the orange settings button ⚙️, to access the OpenType features. Click which OpenType features you would like to include, or, choose not to use any Font Subsetting, so you can access the full character set. Please note that when you use the full font, the file size will be very large. While a font subset size may be 20-30kb, the complete font file may be over 200-300kb. Click the Submit button, and Save Changes.

A new webfont will be generated, and you can access the OpenType features by calling the specific font-variant property in CSS. We prepared this tutorial about using OpenType features in CSS.