@font-your-face logo

Overview

@font-your-face provides an administrative interface for browsing and applying web fonts (using CSS @font-face, supported in all popular browsers) from a variety of sources. Try it out on simplytest.me.

Features

  • A font browsing interface allows selection of fonts from from several providers:
  • Fonts are automatically loaded on site simply by clicking "Enable"; no need to create font files, write CSS, add JS, nor figure out different methods for every font provider.
  • Clear indication of license restrictions on provided fonts.
  • Fonts can be applied to specific text on the site either by using the provided font-family identifier in theme CSS, or by typing a CSS selector directly in the @font-your-face interface.
  • The @font-your-face code is designed for re-use, so other modules can both supply and read active and available font information.
  • Fonts can be exported/imported using Features (7.x-2.x only)
  • You can also import your own local fonts in all web formats: EOT, TTF, WOFF and SVG.

Requirements

  • The main @font-your-face module has no requirements beyond Drupal core and a bit more memory.
  • The UI module relies on Views for the browsing interface.
  • The Typekit module requires a server that can securely (SSL) connect to Typekit.com.

Development Plans

Beyond bug fixes, the next (7.x-2.7) release will focus on the following issues:

Get Involved

If you are interested in helping with @font-your-face, here are some good ways to get started:

  • Spread the word. Too many people don't realize what we can do with web fonts in Drupal. Share with your local community.
  • Contribute documentation. If you've successfully used the module, you can help explain it to others.
  • Review a patch. Improvements and bug fixes need to be tested and reviewed before they can make it into the next release.
  • Port a patch. This code is already written, and just needs to be edited slightly (maybe not at all) to work in a different version of Drupal.
  • Take over a submodule. Each individual web font provider in @font-your-face has a dedicated submodule. These submodules could be moved to separate projects, and generally require very little maintenance work.
  • Become a co-maintainer. While @font-your-face is actively maintained, it would be great to have more people involved, especially people with a demonstrated ability to do some of the above.

Support

Questions? Feedback? Use the issue queue, contact @fontyourface on Twitter, or find sreynen on IRC.

Credits

@font-your-face was created by Scott Reynen of Sliced Bread Labs and Aten Design Group, and developed by Scott and Baris Wanschers of LimoenGroen.

7.x-2.0 development was funded by Monotype Imaging.

Related projects

  • Icon Fonts extends @font-your-face to support icon fonts.
  • AdaptiveTheme can use @font-your-face fonts.
  • Sweaver provides a visual interface for theme editing, including managing fonts with @font-your-face.
  • Google Webfont Loader API can be used with @font-your-face to standardize how fonts are loaded across browsers.
  • For something less serious, Random Fonts lets you try how your site would look with some randomly chosen fonts (most likely awful, but occasionally you'd get some interesting ideas). It also lets you create styling that looks like a ransom note.
  • Google Fonts and TypeKit modules have both been deprecated in favor of @font-your-face.
  • Dynamic Font Rendering applies uploaded fonts via an input filter.

Project Information

Downloads