CodePen is een webgebaseerde HTML-, CSS- en JavaScript-code-editor waarmee je rechtstreeks in de browser kunt experimenteren met code. Je kunt aangepaste weblettertypen gebruiken, rechtstreeks met je Pennen.
Lettertypen kiezen om te gebruiken
Volg de zelfstudie over weblettertypen om enkele lettertypen te kiezen en je webproject te maken.
De insluitcode toevoegen aan de Pen
De insluitcode kan worden toegevoegd in de gebruikersinterface van CodePen in het veld 'Stuff for <head>' in het instellingenmenu van de HTML-editor of in het menu 'CSS > Add External CSS'.
Je vindt de insluitcode voor je project door naar de pagina Webprojecten te gaan en de projectnaam te zoeken. Kopieer en plak de standaard CSS-insluitcode voor dat project op een van deze locaties.
De lettertypen in je CSS toepassen
Nu kun je de namen van de lettertypefamilies gebruiken in de CSS-editor van de Pen, waarna de lettertypen direct zichtbaar zijn in de liveweergave.
De naam van de lettertypefamilie die in de CSS moet worden gebruikt, wordt ook weergegeven in het webproject. Lees meer over het gebruik van lettertypen in CSS.
Pennen klonen
Openbare Pennen kunnen worden gekloond (forked), zodat andere gebruikers kunnen voortbouwen op jouw code. De weblettertypen werken ook in de gekloonde Pen.
Een project verwijderen of je lidmaatschap annuleren
Als je het project verwijdert dat je op CodePen gebruikt of als je je lidmaatschap opzegt, zijn de lettertypen niet meer beschikbaar voor de Pennen die die insluitcode gebruiken. Dit geldt voor je originele Pen en voor alle Pennen die op basis hiervan zijn gekloond (forked). De alternatieve lettertypen die in de CSS zijn opgegeven, worden toegepast in plaats van de aangepaste weblettertypen.
Verwante informatie
Adobe Fonts verkennen
Vind het perfecte lettertype voor elk web- of drukwerkproject.
