Bug 261086

Summary:

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

Product:

WebKit

Reporter:

chrillek <ck>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

karlcow, mmaxfield

Priority:

Keywords:

BrowserCompat

Version:

Safari 16

Hardware:

Unspecified

OS:

iOS 15

Attachments:

Description	Flags
First-letter styling in Firefox (above) and Safari. FF is correct	none
rendering in Safari, firefox	none

Description chrillek 2023-09-03 10:34:52 PDT

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.

Comment 1 Karl Dubost 2023-09-03 22:07:29 PDT

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

Comment 2 Karl Dubost 2023-09-03 22:14:10 PDT

@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");
}

Comment 3 chrillek 2023-09-03 22:57:38 PDT

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.

Comment 4 Karl Dubost 2023-09-04 01:58:47 PDT

Thanks for the digging. 
Indeed Duplicate of Bug 195002

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