Start Debugging
DE
2026-05-01 css Edit on GitHub

CSS: Wie man Custom Fonts verwendet

Erfahren Sie, wie Sie in CSS3 mit der @font-face-Regel benutzerdefinierte Fonts einsetzen, einschließlich Syntaxbeispielen und einer Demo.

Von Marius Bughiu · 1 Min. Lesezeit ·

CSS3 erlaubt die Nutzung benutzerdefinierter Fonts über die Regel @font-face. Sie lassen sich sehr leicht einbinden, die Syntax sieht so aus:

@font-face {
    font-family: someFont;
    src: url('path/font.ttf');
}

Damit deklarieren Sie einen Font zur Verwendung in Ihrer Webseite. Ein Beispiel:

@font-face {
    font-family: CODEBold;
    src: url('../fonts/CODEBold.otf');
}

Um den Custom Font auf Ihren Text anzuwenden, nutzen Sie die font-family-Eigenschaft:

<h1 style="font-family: CODEBold">Start Debugging</h1>

Eine gute Quelle für Custom Fonts ist dafont.com Hier ist ein vollständiges, eigenständiges Beispiel mit einer von Google gehosteten Schriftart, das Sie in eine HTML-Datei einfügen und in jedem Browser öffnen können:

<!doctype html>
<html>
<head>
  <style>
    @font-face {
      font-family: "Press Start 2P";
      src: url("https://fonts.gstatic.com/s/pressstart2p/v17/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2") format("woff2");
    }

    h1 {
      font-family: "Press Start 2P", monospace;
      font-size: 32px;
    }
  </style>
</head>
<body>
  <h1>Start Debugging</h1>
</body>
</html>

Comments

Sign in with GitHub to comment. Reactions and replies thread back to the comments repo.

< Zurück