Faux Italic Issue with Playfair Display on Seafoam Theme in iPhone Safari

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.

https://skeleton.dev

MIT License

4.97k stars 316 forks source link

Faux Italic Issue with Playfair Display on Seafoam Theme in iPhone Safari #2188

Closed Typogram closed 10 months ago

Typogram commented 1 year ago

Current Behavior

There seems to be a typography issue with the heading font in the Seafoam Theme. The Playfair Display Italic is registered as a normal style, causing the font to undergo a 'faux italic' transformation by the browser's algorithm, which results in an undesired appearance.

Screenshots: Faux italic (iPhone safari)

Correct rendering (Windows chrome)

Expected Behavior

The italic style of the Playfair Display font should be displayed as intended without any additional skewing or faux italic transformation applied.

Actual behavior: The font is skewed further by the browser’s algorithm, creating a faux italic effect, which affects the typography aesthetics.

Steps To Reproduce

Open iPhone Safari
Navigate to the page with the Seafoam Theme applied
Observe the heading font (Playfair Display Italic)

Link to Reproduction / Stackblitz

No response

More Information

Environment:

Device: iPhone
Browser: Safari

Typogram commented 1 year ago

Problem code:

@font-face {
    font-family: Playfair Display;
    src: url(../../../fonts/PlayfairDisplay-Italic.ttf);
    font-display: swap
}

Needs to be

@font-face {
    font-family: Playfair Display;
    src: url(../../../fonts/PlayfairDisplay-Italic.ttf);
    font-display: swap;
    font-style: italic;
}

Typogram commented 1 year ago

The cli tool also generate site with this issue if the options to install the seafoam theme is chosen.

Typogram commented 1 year ago

Similarly, there are also faux bold problem with modern, gold-nouveau and rocket themes in the heading font. Need to register fonts with proper font-weight in the @font-face.

endigo9740 commented 1 year ago

Thanks for bringing this up and providing a solution @Typogram. If you get a chance we would gladly welcome a PR for this. The styles for the documentation site are handled here: https://github.com/skeletonlabs/skeleton/blob/dev/sites/skeleton.dev/src/app.postcss

Per the CLI, that's handled by @niktek and/or @Mahmoud-zino. I'd suggest creating a second thread that links to this issue here: https://github.com/skeletonlabs/create-skeleton-app/issues

endigo9740 commented 11 months ago

We never quite got a fix on this issue, so I'm opening it back up for anyone to jump on an address. Thanks!

endigo9740 commented 10 months ago

In an effort to prepare for Skeleton v3, we're consolidate some related issues down to a single ticket. This will ensure that we can see the full context of requests when the time comes to refactor and update this feature going forward. If you wish to add additional feedback or suggestions, please so here:

https://github.com/skeletonlabs/skeleton/issues/1142