- 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
CSS selectors tell the browser where to apply the web fonts you're using, as well as the weight and style of the font to use for the text.
Using the font-family names in your CSS
The Web Projects page lists the CSS font-family name, numerical weight, and font style for each font in the project. Click the "Edit Project" link to view the CSS details for each project.
Once you’ve included the embed code in your document, use these font-family names in the CSS to apply the fonts to the text. For example:
h1 { font-family: "brandon-grotesque", sans-serif; }
Specifying fallback fonts
If a user’s browser doesn’t support web fonts or they don't load for any reason, the fallback fonts in the CSS stack will be used instead.
The font stack should contain at least one fallback font that is uniformly available across platforms (like Georgia or Arial), followed by a generic font-family name (like serif or sans-serif). If the browser can’t find the first font, then it will try the second font, and so on.
Using multiple weights and styles
You can specify font-weights other than "normal" and "bold" by using numeric font-weight values in the CSS. The numeric values most frequently correspond to these weights:
- 100 = thin
- 200 = extra-light
- 300 = light
- 400 = normal, book
- 500 = medium
- 600 = demi-bold
- 700 = bold
- 800 = heavy
- 900 = black
You can find the numeric values for all of the fonts in your project on the Web Projects page.
For example, use this CSS to apply the 700 weight of a font to the h1 element:
h1 { font-weight: 700; }
Using variation-specific names in Internet Explorer 8
Internet Explorer 8 loads a maximum of four weights per family, and using two closely-related weights (e.g., 600 and 700) may result in only one weight loading correctly. Adobe Fonts serves variation-specific font-family names to those versions of the browser to manage both of these bugs.
The variation-specific name should be added at the beginning of a font-family stack as needed, before the main family name:
#post-title { font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; }
The names consist of the normal font-family name, followed by a dash, followed by a font variation description (or FVD). For example, the variation-specific name for brandon-grotesque that contains the 700 weight font is brandon-grotesque-n7.
The variation-specific name will be undefined in browsers that don't have these issues, so they will use the full family name that comes second in the stack.
Most users won't need to use these additional font-family names. You'll only need to add them if you see problems with fonts displaying correctly in Internet Explorer 8 specifically.