Web Fonts Extension

webfonts edited this page Nov 26, 2011 · 3 revisions
Clone this wiki locally


The Web Fonts extension is designed for the Joomla! CMS, versions 1.6 and 1.7.


The Web Fonts extension is designed to work with IE8 and IE9 and current versions of Safari, Chrome, Firefox, and Opera.


It allows a designer to search various font services and integrate the fonts they provide into their projects via CSS @font-face rules.

This extension is targeted for designers and at least a rudimentary understanding of CSS is necessary. All the fonts will be selected and imported via the Web Fonts interface, however the fonts are assigned to html tags, so it's very important that the end user understands how CSS styles work within the browser.


  1. Both the Web Fonts component and plugin must be installed.
  2. Once installed, the user must enable the plugin.
  3. Navigate to Components > Web Fonts
  4. Select a vendor and begin importing fonts
  5. Assign selectors to various fonts via the Stylesheet

Current Supported Services

  • Fonts.com Web Fonts
  • Google Web Fonts

Fonts.com Notes

Fonts.com requires that you setup an account and create a project before importing fonts.

You have three options to set up an account:

  1. You have an existing account: Use an Authorization Key from a current account (if you don't have one skip this.) You can find the authorization key on the Fonts.com site under My Account.
  2. You have an existing account: Use your email and password to the Fonts.com site to import the Authorization Key.
  3. You don't have an account: Create a New Account. Once you've created an account you can use either Option 1 or 2 to import your key and create a project.

IMPORTANT: You must set the domain in use for the project. Until you do so, the fonts will not load correctly on your site in either the previews on the stylesheet or on the front end.

Removing the Fonts.com banner

Only commercial accounts with Fonts.com can remove the badge showing in the bottom right hand corner (if you're using a free account it will always show). To upgrade your account visit the Fonts.com site and login to your Web Fonts account.