2012-03-02 Aktualisiert 2023-11-05 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 · 2012-03-02

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 Eine Demo finden Sie hier: Custom Fonts Demo

Comments