Last updated 12 August 2013. Created on 22 September 2011.
Edited by 3lackRos3, JoshuaBud, Ira Rabinowitz, sreynen. 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"


Tips:

  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 your font to tags, note that your font may be overridden by child tags font, especially when you assign font to the body tag. In CSS, the most specific selector takes precedence.

See http://drupal.org/project/fontyourface#support for support options.

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