CodePen ist ein webbasierter HTML-, CSS- und JavaScript-Code-Editor, mit dem Sie mit dem Code direkt im Browser experimentieren können. Sie können benutzerdefinierte Webschriftarten direkt in Ihren Pens verwenden.

Auswählen zu verwendender Schriftarten

Befolgen Sie das Tutorial zu Webschriftarten, um einige Schriftarten auszuwählen und Ihr Webprojekt zu erstellen.

Hinzufügen des Einbettungscodes zum Pen

Sie können den Einbettungscode im HTML-Editor im Einstellungsmenü im Feld „Stuff for <head>“ (Material für <head>) zur CodePen-UI hinzufügen. Alternativ können Sie hierfür das Menü „CSS“ > „Add External CSS“ (Externes CSS hinzufügen) nutzen.

Um den Einbettungscode für Ihr Projekt zu finden, besuchen Sie die Seite mit den Webprojekten und suchen Sie nach dem Namen des Projekts. Kopieren Sie den Standard-CSS-Einbettungscode in dieses Projekt und fügen Sie ihn an einer dieser Positionen ein.

Verwenden von Codepen mit dem Standard-CSS-Einbettungscode
Verwenden von Codepen durch direkte Verknüpfung der CSS-Datei

Anwenden der Schriftarten in Ihrem CSS

Jetzt können Sie die Schriftfamiliennamen im CSS-Editor des Pens verwenden und die Schriften werden unverzüglich in der Live-Ansicht angezeigt.

CodePen-Editor mit angewendeter Webschriftart

Der Name der im CSS zu verwendenden Schriftartenfamilie ist ebenfalls im Webprojekt aufgeführt. Lesen Sie mehr über die Verwendung von Schriftarten in CSS.

CSS-Informationen auf der Webprojekt-Seite

Kopieren von Pens

Öffentliche Pens können kopiert werden, sodass andere Benutzer auf Ihren Code aufbauen können. Die Webschriftarten funktionieren auch im kopierten Pen.

Löschen eines Projekts oder Kündigen Ihres Abonnements

Wenn Sie das Projekt, das Sie für CodePen verwenden, löschen oder Ihr Abonnement kündigen, stehen die Schriftarten auf den Pens, die diesen Einbettungscode verwenden, nicht mehr zur Verfügung. Hierzu gehören der ursprüngliche Pen sowie alle Pens, die davon kopiert wurden. Anstelle der benutzerdefinierten Webschriftarten werden die Ausweichschriftarten verwendet, die im CSS festgelegt wurden.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie