@font-your-face
22,619 sites
Security covered
Fontyourface provides an administrative interface to easily browse and apply web fonts from various sources, including Google Fonts and Font Squirrel. It simplifies the process of adding fonts to your site by automatically handling font loading and allowing you to apply them to specific text elements using CSS selectors. You can also import your own local fonts.
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:
- Typekit.com
- Google Fonts
- Adobe Edge Web Fonts
- Font Squirrel
- Fonts.com
- Fontdeck (7.x only, service now deprecated)
- 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.
- You can also import your own local fonts in WOFF format.)
- Fonts can be exported/imported(7.x-2.x via Features, 8.x via core configuration)
- Automated tests (8.x via TravisCI)
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. In Drupal 8, this is built-in.
- The Typekit module requires a server that can securely (SSL) connect to Typekit.com.
Related projects
- Icon Fonts extends @font-your-face to support icon fonts. (7.x)
- AdaptiveTheme can use @font-your-face fonts. (7.x)
- Sweaver provides a visual interface for theme editing, including managing fonts with @font-your-face. (7.x)
- Google Webfont Loader API can be used with @font-your-face to standardize how fonts are loaded across browsers. (7.x, 8.x)
- 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. (7.x)
- Google Fonts and TypeKit modules have both been deprecated in favor of @font-your-face.