User Guide Cancel

CSS selectors

  1. Adobe Fonts User Guide
  2. Introduction
    1. System and subscription requirements
    2. Browser and OS support
    3. Activate fonts on your computer
    4. Add fonts to your website
    5. Activate 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: Activating fonts
    12. Active fonts aren't added to font menu
    13. "Unable to activate 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

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.

image

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.

image

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.

Adobe logo

Sign in to your account