Using your own fonts with @font-face in Drupal Gardens

cathy.colson's picture

Lately, I’ve been experimenting with Acquia’s impressive Drupal Gardens service. As a designer, I’ve enjoyed the amount of theming control available through the web interface. While I do have a few wishes, it’s really hard to complain; this thing provides nearly everything you need for complete custom theming, especially if you’re willing to get a little creative.

Along these lines, I was thrilled to see that Drupal Gardens offers a good list of installed, public-license, @font-face fonts, ready to use in your theme. Additionally, and very cool, Drupal Gardens also integrates with your Typekit account, so you can use any of the fonts available to you through their library.

However, what if you have a web-licensed font that was purchased separately? Currently, Drupal Gardens does not appear to allow you to upload fonts directly to the available media on your site. (I’ve tried adding to the allowed file extensions for media types with no luck; so perhaps I’m just doing something wrong.) So, I came up with a bit of a hack to get around the issue:

  1. I created a new content type and named it Font. I added a field for file using the file widget and set the allowed extensions to ttf and otf, then saved.
  2. Using the Font content type, I created a new node and selected the particular font I wanted to use from my computer, and saved. The font file is uploaded to my files directory, where I can now reference it.
  3. In the Advanced tab of the theme editor, I added the @font-face reference to the first line of the sheet: @font-face {font-family: Font Name; src: url(‘files/FontFileName.ttf’);}
  4. In the same window, I can now reference my font with CSS, just like any other, using the font-family attribute, for example: h1 {font-family: Font Name; font-size: 1.4em;} 

There are, of course, a few caveats to using @font-face in general, which I’m not going to go into here, but I recommend always conforming to the standard practice of naming alternate fonts (font-family: Font Name, Helvetica, Arial, sans-serif;) so your design can fail gracefully. Please be sure your font’s license provides for web use before uploading it to your website. There are tons of web-licensed fonts out there—Font Squirrel is a great place to start. 

Comments

I like your solution for custom web-licensed fonts and I'm glad you are finding Drupal Gardens useful. Please let us know in http://drupalgardens.com/forums if there is anything else we can do for you.

- Chris

I know this is an old posting, but I'm looking for some answers.

In the past I've used a service (Typekit) to serve fonts they offered. But I'm looking into purchasing a font from a foundry that Typekit and other services don't have any agreement with.

Your basic method of creating a content type and uploading the font is a great solution. How would this method work outside of Drupal Gardens? In other words with a stand alone Drupal install? Would I just add the CSS styles I need in my stylesheet? I'm using Drupal 7 and the Omega theme.

Thank you for any feedback or suggestions.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre>
  • Lines and paragraphs break automatically.

More information about formatting options

Switchback Caravan logo

Caravan is a powerful and full-featured membership management system, designed specifically for membership- driven organizations.

Caravan Member Managment

Switchback Trailhead logo

Trailhead is a Drupal-based system, built with the features smaller businesses need, bundled together into a ready-to-launch package.

Trailhead CMS Packages

On the Trail Blog