Handboek Annuleren

Weblettertypen gebruiken met 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. How to use fonts in Adobe Muse
    9. Using web fonts in Muse
    10. Packaging font files
    11. Troubleshooting guide: Adding fonts
    12. Added fonts aren't showing to font menu
    13. "Unable to add one or more fonts" or "A font with the same name is already installed"
    14. 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. Using web fonts in HTML email or newsletters
    4. Using web fonts with Accelerated Mobile Pages (AMP)
    5. CSS selectors
    6. Customize web font performance with font-display settings
    7. Embed codes
    8. Dynamic subsetting & web font serving
    9. Font events
    10. Why are my web fonts from use.typekit.net?
    11. Site can't connect to use.typekit.net
    12. Using web fonts with CodePen
    13. Browser and OS support
    14. Domains
    15. Using web fonts when developing locally
    16. Content security policy
    17. 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 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.

Codepen gebruiken met de standaard CSS-insluitcode

Codepen gebruiken door een rechtstreekse koppeling naar het CSS-bestand te maken

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.

CodePen-editor met toegepast weblettertype

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.

CSS-informatie op de pagina van een webproject

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.

 Adobe

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX 2024

Adobe MAX
De creativiteitsconferentie

14–16 oktober Miami Beach en online

Adobe MAX

De creativiteitsconferentie

14–16 oktober Miami Beach en online