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

[Typogram]

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

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

Link to Reproduction / Stackblitz

No response

More Information

Environment:

• Device: iPhone
• Browser: Safari

[Typogram]

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]

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

[Typogram]

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]

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]

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]

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:

• NEXT: New Theme Generator #1142