Last updated 7 December 2017. Created on 22 September 2011.
Edited by garyc13, 3lackRos3, JoshuaBud, Ira Rabinowitz. Log in to edit this page.

@font-your-face (project page) provides an administrative interface for browsing and applying web fonts from a variety of sources. Web fonts are supported in all widely-used web browsers, even IE 6. Several different organizations host and sell or offer free web fonts, and @font-your-face supports all providers as well as fonts hosted locally in Drupal.

Installing @font-your-face:

  1. Place the entirety of this directory in sites/all/modules/fontyourface
  2. Navigate to admin/modules. Enable @font-your-face and one or more of the submodules (font providers) in the group.
  3. Ensure that @font-your-face UI, Administrative interface for managing fonts, is enabled.
  4. To make @font-your-face configurable by anyone other than UID 1 (adminsitrator), be sure to grant the "administer @font-your-face" permission to the appropriate roles.

Import your fonts:

  1. Go to admin/config/user-interface/fontyourface
  2. For each option, click the "Import" buttons to bring in applicable fonts.

Using @font-your-face:

  1. Navigate to/admin/appearance/fontyourface
  2. Click the "Browse fonts to enable." link.
  3. Select a font and click on the name.
  4. Enter a CSS selector for the content you want to use the font (or leave it as "body" to use it everywhere)
  5. Click "Add font"


  1. Note that Internet Explorer has a limit of 32 CSS files, so using @font-your-face on CSS-heavy sites may require turning on CSS aggregation under administer >> site configuration >> performance.
  2. When applying font properties to tags, keep in the mind that it may be overwritten by a font properties of child tag. For example, if you assign a font to the body tag, but assign another to a tag within the body. In CSS, the most specific selector takes precedence.

See for support options.

Looking for support? Visit the forums, or join #drupal-support in IRC.