[#604] Allow Firefox on macOS to see italic text.

[nk9]

I've tested this by changing the rendered CSS as below on Safari, Firefox and Chrome on macOS 11.6.2. I haven't actually run Hugo with the below change, because I don't have a doks install set up to develop with. But I hope it's simple enough to verify that this change does what's expected.

Here's the relevant MDN page. MDN is actually kind of confusing here. The formal syntax says that you should use a font family name inside local(), but the code in two other places say you should actually use the font face name. And the example is quite explicit that the PostScript name is an acceptable value here.

It looks like MDN got it wrong, because the CSS spec is quite clear:

The locally-installed argument to local() is a format-specific string that uniquely identifies a single font face within a larger family.

Looks like I'll have to file an MDN bug now too, LOL! [Update: bug filed.]

Note that, unsurprisingly, all the bold text goes away when I change the local() specifier to the PostScript name of Jost-Regular. I guess there would need to be a few more @font-face rules to account for that.

[h-enk]

I do think it is OK to change the Doks setup as per the CSS spec — does that solve your issue? So, e.g.:

/* jost-italic - latin */
@font-face {
  font-family: Jost;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:
  local("Jost* BookItalic"),
  local("Jost-BookItalic")
    url("fonts/vendor/jost/jost-v4-latin-italic.woff2") format("woff2"),
    url("fonts/vendor/jost/jost-v4-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

[nk9]

Ooooook, I think I see what's happened.

You're using the indestructible version of the font. But I just searched for Jost and downloaded the first version I found, which happend to be from Google Fonts. Then I double clicked the regular and italic VariableFont ttf files in the top level. This version of Jost has a different PostScript name!

With this setup, the original code (local("Jost")) doesn't work for me on either FF or Safari. (Chrome does work though, oddly. Hopefully you'll be able to reproduce this now!) But the version you've proposed does work. And when you install the indestructible version only, the original also works. (Which is why you couldn't reproduce.)

So if you want to be Really Correct™ and follow the spec, while also minimizing external fetches even for font nerds who have only this other version of the font installed locally, it looks like the thing to do is:

  src:
    local("Jost* BookItalic"),
    local("Jost-BookItalic"),
    local("Jost-Italic"),
    local("Jost Italic Italic"),
    url("fonts/vendor/jost/jost-v4-latin-700italic.woff2") format("woff2"),
    url("fonts/vendor/jost/jost-v4-latin-700italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

But I wouldn't blame you if you made the non-indestructible folks download the woffs. :-) Regardless, it looks like specifying the font face exactly as recommended by W3C is a good idea. (And this goes for the Roman weights as well.) Also, I noticed some caching behavior with FF where things appeared to work even after I'd made a change that should have broken it. So beware of that as well, a browser restart might be needed during testing.

I'm sorry this has turned into such a trial! But thanks for bearing with me and being willing to get to the bottom of it.

[h-enk]

I'm sorry this has turned into such a trial! But thanks for bearing with me and being willing to get to the bottom of it.

That's totally OK, I think we both like a challenge 😉

Also, I noticed some caching behavior with FF where things appeared to work even after I'd made a change that should have broken it.

Yeah, I'm aware. I think that's because of the resource hints — will do some testing now later (other things first).

[nk9]

Heh, yeah, the curse of the engineer! "It works now, but I don't know WHY it works. Hmm…"

In other news, TIL that different comment styles are handled differently by the SCSS compiler! I've switched to silent ones for the proposed src lines.

[h-enk]

Tested /verified. Looking good — thanks!

One thing though (as mentioned before). Now, these files always get loaded — also when the local ones are present:

https://github.com/h-enk/doks/blob/a5a082ed4caa546d8fbe2fdef669a3b583c36410/layouts/partials/head/resource-hints.html#L1-L2

But, I don't think it's solvable in a solid (non hacky) way. Also, I expect that the majority of visitors of a Doks website do not have Jost installed locally. Then, this is a minor thing as far as I'm concerned — but noted.