How to use/access swash alternate letters of font via css?

user_797092 0
Viewed 81

How do you access alternative "swash" letters via CSS? I'm using a decorative script font in a web project. This is how it looks now. But I want the "T" to be curled:

Curved sample text

The font I'm using is "Zing Rust Script". Many capital letters have "Swash" alternates. For example, here's the "T", as it appears in the "FontLab" font editor. See how there's both the "T", and "T.swsh"?

View from FontLab

In a graphics editor, like Adobe Photoshop, letter alternates are displayed automatically:

enter image description here

In CSS, it's possible to enable extended font options using CSS properties like these:

font-feature-settings: 'swsh', 'flac', "liga" , "dlig" , "kern" , "fina" ;
font-feature-settings: "smcp", "swsh" 2;
font-variant-ligatures: normal;

This is working for ligatures, but NOT for Swash letters. I'm working in iOS and Safari. I'm no expert with FontLab, but I don't see a clear place that font alternates or font features are defined.

Any ideas how to access that curly "T"?

typography css
1 Answers

Ok, So the above were all right. I was using a system (Svelte) for pre-processing, and it was subsetting my fonts, removing the extended characters.

So if you are making a web app, and the font-feature-settings are not working, confirm you have the complete file file.

user_7970920
Related