- Adobe Fonts User Guide
- Introduction
- Font licensing
- Font licensing
- Manage your account
- Licensing for Creative Cloud for enterprise customers
- Adding font licenses to your account
- Removing fonts from the subscription library
- Adobe Fonts not available to Adobe IDs registered in China
- Why aren't these fonts included in my Creative Cloud subscription?
- Morisawa font removal September 2021
- Getting and using fonts
- Using Adobe Fonts in Creative Cloud apps
- Manage your fonts
- Resolve missing fonts in desktop applications
- Using fonts in InDesign
- Fonts and typography
- Using web fonts in HTML5 Canvas documents
- Using fonts in InCopy
- Using web fonts in Muse
- Packaging font files
- Troubleshooting guide: Adding fonts
- Added fonts aren't showing to font menu
- "Unable to add one or more fonts" or "A font with the same name is already installed"
- What happens when a font I'm using is updated by the foundry?
- Web design and development
- Add fonts to your website
- Troubleshooting guide: Adding fonts to a website
- Using web fonts in HTML email or newsletters
- Using web fonts with Accelerated Mobile Pages (AMP)
- CSS selectors
- Customize web font performance with font-display settings
- Embed codes
- Dynamic subsetting & web font serving
- Font events
- Why are my web fonts from use.typekit.net?
- Site can't connect to use.typekit.net
- Using web fonts with CodePen
- Browser and OS support
- Domains
- Using web fonts when developing locally
- Content security policy
- Printing web fonts
- Language support and OpenType features
- Font technology
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.
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.
The font-family name to use in the CSS is listed in the web project as well; read more about using fonts in CSS.
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.
More like this
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online
Adobe MAX
The Creativity Conference
Oct 14–16 Miami Beach and online