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änd teckensnitten i din CSS-kod
Nu kan du använda teckensnittsfamiljens namn i Pens CSS-redigerare. Teckensnitten syns då direkt i Live-vyn.
Teckensnittsfamiljens namn som ska användas i CSS-koden listas även i webbprojektet. Läs mer om att använda teckensnitt i CSS-kod.
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.
Liknande innehåll
Utforska Adobe Fonts
Hitta det perfekta typsnittet för alla webb- och utskriftsprojekt.
