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.
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.
Der Name der im CSS zu verwendenden Schriftfamilie ist ebenfalls im Webprojekt aufgeführt. Lesen Sie mehr über die Verwendung von Schriften in CSS.
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.
Bei Ihrem Konto anmelden