Closed Typogram closed 10 months 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;
}
The cli tool also generate site with this issue if the options to install the seafoam theme is chosen.
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
.
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
We never quite got a fix on this issue, so I'm opening it back up for anyone to jump on an address. Thanks!
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:
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
Link to Reproduction / Stackblitz
No response
More Information
Environment: