User Guide Cancel

Using web fonts with 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
    11. Site can't connect to
    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 a web-based HTML, CSS, and JavaScript code editor that lets you experiment with code right in the browser. You can use custom web fonts right in your Pens.

Choose fonts to use

Follow the web font tutorial to choose some fonts and create your web project.

Add the embed code to the Pen

The embed code can be added to CodePen UI in the “Stuff for <head>” field in the HTML editor’s settings menu or in the "CSS > Add External CSS" menu

To find the embed code for your project, visit the Web Projects page and locate the project name. Copy and paste the default CSS embed code for that project into one of these locations.

Using Codepen with the default CSS embed code

Using Codepen by directly linking the CSS file

Apply the fonts in your CSS

Now you can use the font-family names in the Pen’s CSS editor, and the fonts will immediately be visible in the Live View.

CodePen editor with web font applied

The font-family name to use in the CSS is listed in the web project as well; read more about using fonts in CSS.

CSS information in the web project page

Forking Pens

Public Pens can be forked, allowing other users to build on your code. The web fonts will work in the forked Pen as well.

Deleting a project or canceling your subscription

If you delete the project that you are using on CodePen or cancel your subscription, the fonts will no longer be available to any of the Pens which use that embed code. This includes your original Pen, as well as any Pens that were forked from it. The fallback fonts specified in the CSS will be applied in place of the custom web fonts.


Get help faster and easier

New user?