Why does fallback font disable opentype features?

Question

when I add fallback fonts to my CSS code, my website no longer shows the opentype features I have activated. Why is this?

Opentype features work with: font-family: "Ogg-Roman";

Opentype features don't work: font-family: "Ogg-Roman", Georgia, serif;

Here is my website: https://cpdesignery.com/

    @font-face {
font-family: "Ogg-Roman", Georgia, serif;
src: url('https://cpdesignery.com/wp-content/uploads/2019/01/Ogg-Roman.eot');
src: url('https://cpdesignery.com/wp-content/uploads/2019/01/Ogg-Roman.eot?#iefix') format('embedded-opentype'), 
url('https://cpdesignery.com/wp-content/uploads/2019/01/Ogg-Roman.woff2') format('woff2'), 
url('https://cpdesignery.com/wp-content/uploads/2019/01/Ogg-Roman.woff') format('woff');
}

h1, h2, h3, h4 {
    -webkit-font-feature-settings: "ss01" on, "ss03" on;
    -moz-font-feature-settings: "ss01" on, "ss03" on;
    -ms-font-feature-settings: "ss01" on, "ss03" on;
    font-feature-settings: "ss01" on, "ss03" on;
}

Can you explain what exactly is not working? Looking at the h1 headline of that start page, I don’t see _anything_ change when I switch between the two variants using dev tools. (In Chrome, not sure if that supports whatever features you are referring to in the first place.) — 04FS, Apr 16 '19 at 13:45
gotcha. When I take out the fallback fonts from the CSS like this: (font-family: "Ogg-Roman";) it works. But when I add the fallback fonts to the CSS like this: (font-family: "Ogg-Roman", Georgia, serif;) the opentype features stop working. — Chris Peterson, Apr 16 '19 at 13:50
Yeah, I got that the first time … but _what exactly_ stops working is what I wanted to know (which features specifically are you talking about, where on your page exactly can we see them in action), because as I said, I can not reproduce your problem when simply toggling between the two in dev tools. (Or does the latter not reproduce the issue, and it actually needs to be in the stylesheet from the very beginning when the page loads?) — 04FS, Apr 16 '19 at 14:00
The specific Opentype feature that I have turned on is: "ss01" which changes these stylesets: g y ý ÿ ĝ ğ ġ ģ ŷ. — Chris Peterson, Apr 16 '19 at 14:17
from what i can see is that the CSS is still the same so something must be changing elsewhere within wordpress when I edit the CSS? — Chris Peterson, Apr 16 '19 at 14:19
`@font-face { font-family: "Ogg-Roman", Georgia, serif;` - this is wrong, in this place `font-family` is only used to _give_ a name to that font. So that needs to be `font-family: "Ogg-Roman"`, and not more. In the rest of the stylesheet, where you format your h1 headlines for example, _that_ is the place to use `font-family: "Ogg-Roman", serif;`. — 04FS, Apr 16 '19 at 15:03
Outside of your own question, note that you can drastically simplify your CSS by removing those `eot` sources - `eot` died when Microsoft declared Windows XP and IE8 dead. Just use `woff` and `woff2`, and your support matrix will go as far back as IE9 and Android 4.3 - which is already way further back than any browser that comes with opentype feature support. — Mike 'Pomax' Kamermans, Apr 18 '19 at 17:02
Also remember: [don't use eot, (and svg/ttf/otf sources). Just use woff/woff2](https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385). — Mike 'Pomax' Kamermans, Apr 23 '19 at 17:06

score 0 · Answer 1 · answered Mar 26 '20 at 21:14

The behaviour of the stylistic set features is font specific: a font designer is free to use them however they choose — i.e., whatever stylistic differences they want to provide. As a result, if you continue to apply the 'ss01' feature but change the underlying font, you may end up with a very different stylistic effect.

The general issue (this applies to more than just stylistic set features) is described in section 6.9 of CSS Fonts Module Level 4.

That assumes that the fallback font even supports the given OpenType feature. It might not. In that case, this from CSS4 Fonts, 6.12 is relevant:

Feature tags not present in the font are ignored; a user agent must not attempt to synthesize fallback behavior based on these feature tags. The one exception is that user agents may synthetically support the kern feature with fonts that contain kerning data in the form of a kern table but lack kern feature support in the GPOS table.

Similar, from section 7.2:

When a font lacks support for a given underlying font feature, text is simply rendered as if that font feature was not enabled; font fallback does not occur and no attempt is made to synthesize the feature except where explicitly defined for specific properties.

Why does fallback font disable opentype features?

1 Answers1