Add professional fonts to your site

The Font management module allows you to choose from the thousands of fonts offered by Typekit.com and Fonts.com to use on your Drupal Gardens website.

The text presented in these fonts on your Drupal Gardens site is real text (not image replacements), "copy/paste-able", searchable, and machine readable (important for search engines, accessibility, screen readers, and so on).

In browsers that cannot display @font-face or Typekit fonts, all text will degrade gracefully to web safe fonts.

Enabling the module

To gain access to additional, external fonts, enable the Font management module.

1. In the admin menu, select Modules.
2. Enable the Font management module.
3. Click Save configuration.

Adding Typekit.com fonts

1. Go to the Font management page at Configuration > Font management.
2. Select the Enable Typekit fonts check box.
3. Enter your Typekit.com ID.
   If you already have a Typekit ID

   1. Enter your Typekit ID and click Save configuration. Enter your kit's Typekit ID, not your Typekit.com username on the Font management page at Configuration > Font management. See "Find your Typekit ID" below.
   2. Add your domain to your Typekit account. On typekit.com, you will have to add your Drupal Gardens domain to one of your existing kits or create a new kit using your Drupal Gardens domain. If you change your site's domain name (whether exporting it to a new hosting environment or mapping custom domains onto your Drupal Gardens site), you will need to reconfigure your Typekit account. For more information, see below.
   If you don't have a Typekit ID

   1. Click the Try it for free link on http://typekit.com and sign up for the Typekit plan of your choice on the Typekit website. A free trial subscription will let you use two Typekit fonts of your choice on one website. Paid plans let you add more fonts and options.
   2. Add your domain name. Make sure you add your Drupal Gardens domain to the new Typekit kit you create. If you change your site's domain name (whether exporting it to a new hosting environment or mapping custom domains onto your Drupal Gardens site), you will need to reconfigure your Typekit account.
   3. As a part of the sign up process, you'll be told to add some Javascript to the head tag of your website. You don't need to do this since Drupal Gardens has already integrated Typekit compatibility for you. Just click "continue" on that page.
   4. Enter your Typekit ID and click Save configuration. Enter your kit's Typekit ID, not your Typekit.com username on the Font management page at Configuration > Font management. See "Find your Typekit ID" below.
4. Browse Typekit.com for fonts you like, and click add to add them to your kit.
5. Select and configure fonts. When you select fonts you like you are shown some configuration options for your Typekit fonts. The default settings are usually all you'll need for using these fonts in your Drupal Gardens site.
6. Click Publish to add your new font to the ThemeBuilder.

   

7. Use your fonts. Open the ThemeBuilder, go to Styles > Font and select an element in your theme. Select your Typekit.com font from the drop-down list of fonts.

Finding your Typekit ID

Find your Typekit ID - Click "Embed code" at the top right corner of your Typekit kit editor in Typekit.com.

Adding Fonts.com fonts

1. Go to the Font management page at Configuration > Font management.
2. Select the Enable Fonts.com web fonts check box.
3. Enter your Fonts.com Web Fonts authentication key and click Save configuration.
   If you already have a Fonts.com account

   1. Go to http://webfonts.fonts.com and sign in to your account.
   2. Create a new Fonts.com project for your Drupal Gardens site on the Project tab.

      

   3. Copy your Fonts.com authentication key at My account > Account summary.

      

   4. Paste it into the Font management page on your Drupal Gardens site.
   If you don't have a Fonts.com account

   1. Go to http://webfonts.fonts.com and sign up for a free or paid account.
   2. Once you have registered, click "Get started". You will be taken to the Create project page.
   3. Enter your project name and Drupal Gardens site URL, then click "Save project".

      

   4. Go to My account > Account summary on Fonts.com. Generate, then save your Fonts.com authentication key.

      

   5. Copy your key.
   6. Paste it into the Font management page on your Drupal Gardens site.
4. Choose your fonts. Go to Choose fonts on Fonts.com (if you have more than one project, select the correct "Current project"), browse for fonts, click "Add to project" to make it available in the ThemeBuilder of your Drupal Gardens site.

   

5. Use your fonts. Open the ThemeBuilder, go to Styles > Font and select an element in your theme. Select your Typekit.com font from the drop-down list of fonts.

Updating your domain name

If you change your domain name from a Drupal Gardens-based name to another, custom domain name, you must change your account settings on any external font websites that you use for your website.

For information about how to update your external font website account, see Completing the process.