Användarhandbok Avbryt

Använda webbteckensnitt med CodePen

  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Add fonts on your computer
    4. Add fonts to your website
    5. Add fonts on CC Mobile
  3. Font licensing
    1. Font licensing
    2. Manage your account
    3. Licensing for Creative Cloud for enterprise customers
    4. Adding font licenses to your account
    5. Removing fonts from the subscription library
    6. Adobe Fonts not available to Adobe IDs registered in China
    7. Why aren't these fonts included in my Creative Cloud subscription?
    8. Morisawa font removal September 2021
  4. Getting and using fonts
    1. Using Adobe Fonts in Creative Cloud apps
    2. Manage your fonts
    3. Resolve missing fonts in desktop applications
    4. Using fonts in InDesign
    5. Fonts and typography
    6. Using web fonts in HTML5 Canvas documents
    7. Using fonts in InCopy
    8. Using web fonts in Muse
    9. Packaging font files
    10. Troubleshooting guide: Adding fonts
    11. Added fonts aren't showing to font menu
    12. "Unable to add one or more fonts" or "A font with the same name is already installed"
    13. What happens when a font I'm using is updated by the foundry?
  5. Web design and development
    1. Add fonts to your website
    2. Troubleshooting guide: Adding fonts to a website
    3. Troubleshoot font issues
    4. Using web fonts in HTML email or newsletters
    5. Using web fonts with Accelerated Mobile Pages (AMP)
    6. CSS selectors
    7. Customize web font performance with font-display settings
    8. Embed codes
    9. Dynamic subsetting & web font serving
    10. Font events
    11. Why are my web fonts from use.typekit.net?
    12. Site can't connect to use.typekit.net
    13. Using web fonts with CodePen
    14. Browser and OS support
    15. Domains
    16. Using web fonts when developing locally
    17. Content security policy
    18. Printing web fonts
  6. Language support and OpenType features
    1. Language support and subsetting
    2. Using OpenType features
    3. Syntax for OpenType features in CSS
  7. Font technology
    1. OpenType-SVG color fonts
    2. Ten Mincho: important points on updating from Version 1.000

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?