Benutzerhandbuch Abbrechen

Verwenden von Webschriften mit CodePen

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 Webschriften direkt in Ihren Pens verwenden.

Auswählen zu verwendender Schriften

Befolgen Sie das Tutorial zu Webschriften, um einige Schriften 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 Schriften 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 Webschrift

Der Name der im CSS zu verwendenden Schriftfamilie ist ebenfalls im Webprojekt aufgeführt. Lesen Sie mehr über die Verwendung von Schriften 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 Webschriften 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 Schriften für die 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 Webschriften werden die Ausweichschriften verwendet, die im CSS festgelegt wurden.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?