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 Web-Schriften direkt in Ihren Pens verwenden.
Auswählen zu verwendender Schriften
Befolgen Sie das Tutorial zu Web-Schriften, um einige Schriften auszuwählen und Ihr Web-Projekt 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 Web-Projekten 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 im CSS-Code
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 Web-Projekt 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 Web-Schriften 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 Web-Schriften werden die Ausweichschriften verwendet, die im CSS festgelegt wurden.
Ähnliche Themen
Stöbern in Adobe Fonts
Finde die passende Schrift für jedes Web- oder Print-Projekt.
