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

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.