Logbook + Scratchpad

I am not new to the font-feature-settings CSS property. In fact, while looking at the Raleway font some time ago, I wanted to change the appearance of the letter w, so I had to figure out both how to make use of font features and why the feature I wanted seemed not to be working.

Find the features

First of all, not all fonts have features. In the case of Raleway, I was sure because they are listed on the font page. Apparently they have the wrong stylistic set number (this was my issue), but they are there.

If the features are not known, you can use a tool to drag-and-drop the font file, than see and try all the font features (if there are any). I used FontDrop, then I learned about two more from the Mozilla developer docs:

• https://wakamaifondue.com/
• https://www.axis-praxis.org/

Use the features

Once you know what features are available for your font, you can include them in your CSS file.

I did use the font-feature-setting for Raleway, with a configuration like this:

@font-face {
    font-display: swap;
    font-family: "Raleway";
    font-style: normal;
    font-weight: normal;
    src: url("/path/to/Raleway-Regular.woff2");
}

body {
    font-family: "Raleway", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-feature-settings: "lnum", "salt", "ss09", "liga" 0;
}

Here, the font-feature-settings enables the “lining figures”, “stylistic alternates”, and the “stylistic set 9” features; it also disables ligatures.

CSS offers more specialized properties like font-variant and its related longhand properties but, according to the Mozilla docs, font-feature-settings is the only one that is fully implemented across browsers. I will stick to it for the time being.

#tech #CSS