Why does the HTML "lang" attribute change font ligatures and how can I avoid this?-CodePudding

On the website I'm currently developing, I'm using the font EB Garamond for some text. It's a multi-language website with a language switcher that toggles the lang attribute of the <html> element between "en" and "de".

On the English version, the text has ligatures. On the German version, it doesn't. If I go to "Inspect Element" on the German version and change the lang attribute to en, the ligatures appear.

I can turn off the ligatures on the English version by applying the CSS rule font-variant-ligatures: none;. However, turning them on in the German version with font-variant-ligatures: normal; doesn't work (not even with !important).

I would like to have the ligatures on in both languages. Does anyone have an idea how I can achieve this, and why it behaves in such a weird way in the first place?

Here's my font-related CSS code:

@font-face {
    font-family: garamond;
    src: url(../fonts/eb-garamond/EBGaramond-Regular.otf);
}

.garamond {
    font-family: garamond;
}

h1 {
    @apply text-4xl font-bold;
}

p {
    @apply mb-2;
}

.lead {
    @apply text-xl;
}

(just fyi, the @apply stuff applies classes from TailwindCSS, see font size, font weight and margin, but that should be irrelevant to the question)

And the HTML / Twig:

<div >
    <h1>{{ "SITE_TITLE"|t|e }}</h1>
    <p >{{ "SITE_SUBTITLE"|t|e }}</p>
</div>

And here's what the English version looks like: Screenshot English

And the German: Screenshot German

CodePudding user response：

A workaround: The lang attribute can be used on single tags, which for example is done with <span lang="en"> tags around single words or phrases to get proper pronounciation of English words in German texts when read by a screen reader.

So if you only need that for example on a certain h1 in your page, you could use it like this...

<h1 lang="en">schachingerfilm</h1>

... and still have lang="de" or an according variable in your bodytag.

(I guess the proper screen reader pronounciation in this case is not that important for you... ;-)