Das Geheimnis, wie man die Schriftart auf einer Webseite ändert

This work by Harald Zigala is licensed under CC BY-NC-SA 4.0

Um die Schriftart auf einer Webseite zu ändern, geht man grundsätzlich wie folgt vor:

1. Man legt ein Verzeichnis an, lädt dort die gewünschte legal benutzbare Schriftart hoch und stellt das Verzeichnis auf "Verborgen, aber verfügbar"

2. Anschließend erstellt man ein Textfeld mit nur den nachfolgend gezeigten Befehlen; diese erstellen die font-family: "costura_regular"

3. In Zeile 5 wird wird die Link-Adresse zur versteckten, aber verfügbaren Schriftarten-Datei korrekt eingetragen

4. In Zeile 10 wird die Schriftart "costura_regular" als erste zu verwendende Schriftart eingetragen

Hinweis #01: In der Zeile 5 muss der Pfad zur Schriftarten-Datei korrekt gesetzt werden!

Hinweis #02: Legt man den CSS-Code in ein Textfeld in die rechte seitliche Block-Leiste und wird dieses Textfeld auf allen Kursseiten angezeigt, so wirkt die Schriftart auf alle Kursseiten.

Kurze Erklärung:

Der vorliegende HTML- und CSS-Code definiert eine benutzerdefinierte Schriftart namens "costura_regular" und legt allgemeine Textstile für eine Webseite fest. Diese Stile umfassen die Schriftart, die Schriftgröße, das Schriftgewicht, die Zeilenhöhe, die Textfarbe, die Textausrichtung und die Hintergrundfarbe. Die Schriftart wird von einer externen URL geladen.

Ausführliche Erklärung:

1. Zeilen 3-8: Hier wird eine benutzerdefinierte Schriftart mit dem Namen "costura_regular" definiert. Die Schriftart wird aus einer externen Quelle (einer URL) geladen und im TrueType-Format (TTF) verwendet. Dies ermöglicht es, eine spezielle Schriftart für den Text auf der Webseite zu verwenden.

2. Zeilen 10-20: Dieser Abschnitt des Codes legt allgemeine Textstile für den gesamten Text auf der Webseite fest. Hier werden verschiedene Texteigenschaften definiert:

   - Der Seitenrand (margin) wird auf 0 gesetzt, was bedeutet, dass der Standardseitenrand entfernt wird, um den Text näher an den Rand des Anzeigebereichs zu bringen.

   - Die Schriftart (font-family) wird auf "costura_regular" festgelegt, gefolgt von einer Prioritätenliste von alternativen Schriftarten, die verwendet werden sollen, falls "costura_regular" nicht verfügbar ist.

   - Die Schriftgröße (font-size) wird auf 1.2 Rems festgelegt, was die Größe des Texts in relativen Einheiten angibt.

   - Die Schriftgewichtung (font-weight) wird auf 400 gesetzt, was einer normalen Schriftgewichtung entspricht.

   - Die Schriftart wird mit "font-display: swap" festgelegt, was sicherstellt, dass die Schriftart sofort sichtbar ist, wenn sie verfügbar ist, anstatt auf die Schriftart zu warten.

   - Die Zeilenhöhe (line-height) wird auf 1.5 gesetzt, was den Zeilenabstand beeinflusst und den Text angenehmer lesbar macht.

   - Die Textfarbe (color) wird auf dunkles Grau (#212529) gesetzt, was die Farbe des Texts auf der Webseite bestimmt.

   - Die Textausrichtung (text-align) wird auf "left" (links) festgelegt, was die Standardausrichtung des Texts auf der Webseite ist.

   - Die Hintergrundfarbe (background-color) wird auf Hellgrau (#ccc) gesetzt, was die Farbe des Hintergrunds auf der Webseite bestimmt.

Dieser Code ermöglicht es, ein einheitliches Erscheinungsbild und eine bessere Lesbarkeit des Texts auf der Webseite sicherzustellen, indem er Schriftart und allgemeine Textstile definiert. Die benutzerdefinierte Schriftart "costura_regular" wird von einer externen Quelle geladen und in Kombination mit den festgelegten Stilen verwendet.

<style>
  /* Definieren einer benutzerdefinierten Schriftart namens "costura_regular" */
  @font-face {
    font-family: "costura_regular";
    src: url("https://moodle.tsn.at/Pfad_zur_Schriftartendatei/costura_regular.otf") format("truetype");
  }

  /* Allgemeine Stile für den gesamten Text der Webseite */
  body {
    margin: 0; /* Entfernt den Seitenrand */
    font-family: costura_regular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* Hier wird eine Prioritätenliste von Schriftarten angegeben, falls die benutzerdefinierte Schriftart nicht verfügbar ist */
    font-size: 1.2rem; /* Schriftgröße auf 1.2 Rems festgelegt */
    font-weight: 400; /* Normale Schriftgewichtung (400) */
    font-display: swap; /* Festgelegt, dass die Schriftart sofort sichtbar ist, falls verfügbar */
    line-height: 1.5; /* Zeilenhöhe auf 1.5 eingestellt (Zeilenabstand) */
    color: #212529; /* Textfarbe in dunklem Grau (#212529) */
    text-align: left; /* Textausrichtung auf links (Standardausrichtung) */
    background-color: #ccc; /* Hintergrundfarbe in Hellgrau (#ccc) */
  }
</style>