Italic not showing on Safari

[Josh-Cena]

Summary

On Safari, italic font is exactly the same as the normal upright version.

URL

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#weakmaps_and_weaksets

Reproduction steps

Read the sentence:

WeakMap and WeakSet got the name from the concept of weakly held values.

Expected behavior

Chrome/Firefox rendering:

Actual behavior

Safari rendering:

(Reproducible on iPad/iPhone as well)

Device

Laptop

Browser

Safari

Browser version

Stable

Operating system

Mac OS

Screenshot

No response

Anything else?

No response

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.

[Elchi3]

I can reproduce this issue, fwiw.

[caugner]

This doesn't seem to be a general issue in Safari, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em#result

So it looks like an issue with the font (Inter) we're using.

[ironnysh]

Hi,
seems like it's missing a font-variation-settings: "slnt" -10; on em elements (see also this reference).

Here's a screenshot from Safari 17.2.1:

[ironnysh]

@caugner --I'm happy to open a PR, but I'm not sure in which stylesheet it belongs :-)

[caugner]

@caugner --I'm happy to open a PR, but I'm not sure in which stylesheet it belongs :-)

@ironnysh Sorry for taking so long to get back to you. I think the best place to add the CSS is around here:

yari/client/src/ui/base/_reset.scss

Lines 54 to 63 in 32a7a4b

	a {
	text-decoration: none;
	}
	/* Make images easier to work with */
	img,
	picture {
	display: block;
	max-width: 100%;
	}

[ironnysh]

@caugner, done now :-)