Silbentrennung - doppelte Trennstriche

[Achim H.]

Hallo allerseits, auf meiner Website habe ich die automatische Silbentrennung aktiviert.

hyphens: auto;

Das klappt ganz wunderbar, am Desktop und mobil. Allerdings macht eine Schriftart Probleme: Andada HT Pro, Version 3.003, als variabler Font, direkt vom Hersteller bezogen, Dateiformat woff2 (ebenso woff):

Statt einem Trennstrich werden zwei Trennstriche am Zeilenende angezeigt.

2026-06-18 21_12_03-Clipboard.png

2026-06-18 21_06_24-Willkommen in meinem Leben - Achim Hohlfeld. — Mozilla Firefox.png

Wenn ich die Seite als html lokal ablege und die Schriftarten lokal einbinde, habe ich nur einen Trennstrich am Zeilenende. Ebenso funktioniert alles richtig, wenn ich keinen variablen Fonts verwende, sondern die Schriftartdateien mit fester Strichstärke.

Mit der Schriftart im Dateiformt ttf klappt alles, online, lokal, mobil, am Desktop, variabel oder nicht, fehlerfrei.

Ich habe schon den Hersteller konatktiert, aber auch dort steht man wohl vor einem größeren Rätsel.

Weiß jemand Rat?

[Spooky]

Poste einen Link zur Seite.

[Achim H.]

https://www.hohlfeld.eu/

[Spooky]

Andada Pro ist ja eine Open Source Font. Von wo genau hast du die Dateien?

[Achim H.]

https://htfonts.com/en/fonts/andada/buy/

[zoglo]

Die Font scheint einfach diese Art von hyphens zu haben. Kannst hier sicher mit hyphenate-character im CSS nacharbeiten.

[Spooky]

Die Font scheint einfach diese Art von hyphens zu haben.

Auf https://fonts.google.com/specimen/Andada+Pro aber nicht.

[Achim H.]

Bei lokaler Verwendung funktioniert alles einwandfrei.

Und: Es handelt sich um den variablen Fonts, nicht den statischen!

[Spooky]

Und: Es handelt sich um den variablen Fonts, nicht den statischen!

Was genau meinst du damit?

[Achim H.]

Ich beantworte gerne alle Fragen, muss aber nicht alles selbst erklären:

https://support.monotype.com/de/arti...variable-fonts

Die hier gelb markierten verwende ich aktuell:

Andada Pro.png

Eingebunden sind sie im CCS dann so:

@font-face {
  font-family: "Andada Pro";
  src: url('/files/.../AndadaPro[wght].woff2') format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
}

@font-face {
  font-family: "Andada Pro";
  src: url('/files/.../AndadaPro-Italic[wght].woff2') format("woff2-variations");
  font-weight: 400 800;
  font-style: italic;
}

[Spooky]

Ich würde an deiner Stelle die Font Files von hier versuchen: https://gwfh.mranftl.com/fonts/andada-pro?subsets=latin

[Achim H.]

Auf https://fonts.google.com/specimen/Andada+Pro aber nicht.

Bei Google gibt's nur das Format TTF, nicht WOFF und WOFF2. Und beim Google Web Font Helper von Mario Ranftl werden keine variablen Fonts generiert. Generiere ich mit dem dort verlinkten Generator aus den Google-TTFs WOFF2-Dateien, habe ich dasselbe Problem wie vorher.

Eine Lösung (Plan B) wäre, tatsächlich die Fonts im TTF-Format einzubinden. Gefällt mir aber nicht.

[stefan-at-work]

na dann konvertiere dir doch den Font: https://yabe-webfont.jooo.si/docs/mi...vert-ttf-woff2

[zoglo]

Variante C - Nutze doch den von mir vorgeschlagengen hyphenate-character und mach dir das doppelte `--` weg. Problem gelöst und du kannst die variablen Fonts nutzen <3
https://caniuse.com/?search=hyphenate-character

[Spooky]

Und beim Google Web Font Helper von Mario Ranftl werden keine variablen Fonts generiert.

Nochmal anders formuliert: ich würde dir empfehlen nicht die Variable Schriftart zu verwenden, sondern die woff2 Files von https://gwfh.mranftl.com/fonts/andada-pro?subsets=latin runterladen, in genau den Schriftschnitten (und ggf. zusätzlichen Zeichensätzen) die du tatsächlich brauchst.

[Achim H.]

Nochmal anders formuliert: ich würde dir empfehlen nicht die Variable Schriftart zu verwenden, sondern die woff2 Files von https://gwfh.mranftl.com/fonts/andada-pro?subsets=latin runterladen, in genau den Schriftschnitten (und ggf. zusätzlichen Zeichensätzen) die du tatsächlich brauchst.

Für die Brotschrift würde ich gerne font-weight = 450 verwenden. 400 ist mir zu dünn und 500 zu dick.

[Achim H.]

na dann konvertiere dir doch den Font: https://yabe-webfont.jooo.si/docs/mi...vert-ttf-woff2

Habe ich gemacht und erhalte mit den "konvertierten" woff2-Dateien doch wieder den Fehler.

[Achim H.]

Die Font scheint einfach diese Art von hyphens zu haben. Kannst hier sicher mit hyphenate-character im CSS nacharbeiten.

Danke für diesen Tipp. Der hilft!