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.
Befolgen Sie das Tutorial zu Webschriftarten, um einige Schriftarten auszuwählen und Ihr Webprojekt zu erstellen.
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.
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 Schriftartenfamilie ist ebenfalls im Webprojekt aufgeführt. Lesen Sie mehr über die Verwendung von Schriftarten in CSS.
Öffentliche Pens können kopiert werden, sodass andere Benutzer auf Ihren Code aufbauen können. Die Webschriftarten funktionieren auch im kopierten Pen.
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.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.