@@Sanddorn22
Fehler im Quelltext?
Ja, du brauchst für jede Schriftart eine eigene @font-face
-Regel.
Außerdem sollten Webfonts als WOFF und WOFF2 (besser komprimiert) vorliegen. Wandle die Schriften in diese Formate um (sofern die Lizenz das nicht verbietet).
Übersehe ich etwas anderes?
Auch das.
font-size: 12px;
12px ist viel zu klein, um gut gelesen werden zu können.
line-height: 17px;
Gib die Zeilenhöhe immer im Verhältnis zur Schriftgröße an, niemals in px. Ansonsten laufen die Zeilen ineinander, wenn der Nutzer die Schrift vergrößert. (Was er bei 12px unweigerlich tun muss.)
text-align:justify;
Blocksatz ist fürs Web ungeeignet. Die unterschiedlich breiten Leerräume machen den Text schlecht lesbar.
<html>
<!DOCTYPE html>
-Angabe fehlt. Ansonsten schalten Browser in den Quirkmodus. 💩
Im <html>
-Tag ist die Sprache des Seiteninhalts anzugeben, wichtig für Screenreader, Silbentrennung, Rechtschreibprüfung u.a. Für deutsch: <html lang="de">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Das kannst du kürzer haben: <meta charset="iso-8859-1">
Als Zeichencodierung solltest du aber besser UTF-8 verwenden.
<meta http-equiv="content-style-type" content="text/css">
Kann weg.
<meta http-equiv="content-language" content="de">
Kann weg. Angabe der Sprache wie oben gesagt.
<h1>Hier erscheint die mit font-face gestaltete Überschrift</h1>
Es gibt keinen Grund, Umlaute zu verstümmeln.
LLAP 🖖
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory