Användarhandbok Avbryt

Använda webbteckensnitt med CodePen

CodePen är en webbaserad HTML-, CSS- och JavaScript-kodeditor där du kan experimentera med kod direkt i webbläsaren. Du kan använda anpassade webbteckensnitt direkt i dina pennor.

Välj teckensnitt att använda

Följ självstudiekursen om webbteckensnitt för att välja några teckensnitt och skapa ett webbprojekt.

Lägg till inbäddningskoden i pennan

Inbäddningskoden kan läggas till i fältet ”Stuff for <head>” i CodePens användargränssnitt i HTML-editorns inställningsmeny eller på menyn CSS > Add External CSS.

Besök sidan Webbprojekt och leta reda på projektnamnet om du vill ta reda på standardinbäddningskoden för ditt projekt. Kopiera och klistra in CSS-standardinbäddningskoden för det projektet på en av dessa platser.

Använda Codepen med CSS-standardinbäddningskoden

Använda Codepen genom att länka direkt till CSS-filen

Använd teckensnitten i din CSS-kod

Nu kan du använda teckensnittsfamiljens namn i Pens CSS-redigerare. Teckensnitten syns då direkt i Live-vyn.

CodePen-editorn med ett webbteckensnitt applicerat

Teckensnittsfamiljens namn som ska användas i CSS-koden listas även i webbprojektet. Läs mer om att använda teckensnitt i CSS-kod.

CSS-information på webbprojektsidan

Knoppa av pennor

Offentliga pennor kan knoppas av, vilket gör att andra användare kan bygga vidare på din kod. Webbteckensnitten fungerar även i den avknoppade pennan.

Radera ett projekt eller säga upp din prenumeration

Om du raderar projektet som du använder på CodePen eller säger upp din prenumeration, kommer teckensnitten inte längre att vara tillgängliga för någon av pennorna där inbäddningskoden används. Detta gäller din originalpenna och alla pennor som har knoppats av från den. Reservteckensnitten som anges i CSS-koden används då i stället för de anpassade webbteckensnitten.

Få hjälp snabbare och enklare

Ny användare?