IBM Plex Sans Condensed is not correctly displayed in combination of ::first-letter

[chrillek]

Created attachment 467531 [details]
First-letter styling in Firefox (above) and Safari. FF is correct

Open https://bru6.de/unterwegs/blog/ljubljana/ in Safari in a mobile view (either width < 768 pixel in portrait mode or height < 600 in landscape). 
The initial letter/first-letter of the first paragraph of text should be displayed in "IBM Plex Sans Condensed" and is displayed as that in Firefox and Chrome.

Safari, however, displays the first letter in "IBM Plex Serif". Inquiring the computed style with JavaScript


first = document.querySelector('.content p:nth-of-type(1):not(.book-summary)'); 
st = getComputedStyle(first,"::first-letter");
console.log(st.getPropertyValue('font-family'));

logs the correct font family, but the display is wrong.

[Karl Dubost]

Created attachment 467534 [details]
rendering in Safari, firefox

That doesn't seem related to ::first-letter at all, but to the font itself.

I changed the font to be color: red, and font-family: Impact
And this is correctly applied in Safari.

So this is "IBM Plex Sans Condensed" which doesn't seem to be understood by Safari. 

https://bru6.de/unterwegs/fonts/ibm-plex-sans-condensed-v7-latin-regular.woff2
https://bru6.de/unterwegs/fonts/ibm-plex-sans-condensed-v7-latin-ext_latin-700.woff2

[Karl Dubost]

@media screen and (min-height: 600px) {
  .content p:nth-of-type(1):not(.book-summary)::first-letter {
    color: #bbb;
    text-shadow: 1px 1px 2px #000;
    font-family: var(--sans-serif-font);
    margin-right: 0.5rem;
  }
  @supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .content p:nth-of-type(1):not(.booksummary)::first-letter {
      -webkit-initial-letter: 3;
      initial-letter: 3;
    }
  }



:root {
  --sans-serif-font: "IBM Plex Sans Condensed";
  --serif-font: "IBM Plex Serif";
  --blue: #1e73be;
  --light-blue: #2f84cf;
  --link-blue: #3273dc;
  --white-fg: #fff;
  --light-gray: #eee;
  --dark-gray: #aaa;
  --foreground: #000;
}


/* ibm-plex-sans-condensed-regular - latin */
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-condensed-v7-latin-regular.woff2")
    format("woff2");
}

/* ibm-plex-sans-condensed-italic - latin */
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-condensed-v7-latin-italic.woff2")
    format("woff2");
}

/* ibm-plex-sans-condensed-700 - latin-ext_latin */
@font-face {
  font-family: "IBM Plex Sans Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-condensed-v7-latin-ext_latin-700.woff2")
    format("woff2");
}

[chrillek]

After I reported the bug, I read at caniuse that Safari can’t cope with _web fonts_ in this situation. So it is related to the font, but it’s not the font that is buggy.

[Karl Dubost]

Thanks for the digging. 
Indeed Duplicate of Bug 195002

*** This bug has been marked as a duplicate of bug 195002 ***