Procuring Fonts

TODO: licensing, purchasing model

Providers

Free

Kalmuna Accounts

All usernames and passwords for these accounts are in LastPass.

fonts.com:
- We have a Monotype Library Subscription which features 2,200 font families2 2,200 font families
- In addition to your existing web fonts benefits, you now have access to more than 10,000 desktop fonts in the Monotype Library. Ready to try it out? Check out our article on getting started with your desktop fonts.
webtype.com
myfonts.com

Paid (no Kalamuna account)

typekit.com (Adobe)
linotype.com

Using Web Fonts

For Drupal

Probably the easiest way to do this in Drupal is to use the @font-your-face module. It provides an admin interface for managing web fonts and has support for the following 3rd party providers:

If you prefer to include 3rd party web fonts without @font-your-face module you should be able to find instructions on how to include the web font from your css at each of the respective 3rd party websites.

Here is how you can load this in with less overhead via a preprocess function: http://cheekymonkeymedia.ca/blog/drupal-planet/how-add-typekit-fonts-your-drupal-website :

/**
* Implements template_preprocess_html().
*/
 
function MYTHEME_preprocess_html(&$variables) {
 //Adds typekit js to theme
 drupal_add_js('//use.typekit.net/wje3ojf.js', 'external');
 drupal_add_js('try{Typekit.load();}catch(e){}', 'inline', 'page_bottom');
}

Self hosting

If you have a copy of a web font that you want to use and intend to host it along with the site then you can use a Sass mixin like the following:

@mixin set-font-face($font-family, $file-path, $weight: normal, $style: normal ) {
  @font-face {
    font-family: $font-family;
    src:
      url(#{$file-path}.woff) format('woff2'), /* Chrome 26+, Opera 23+ */
      url(#{$file-path}.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-weight: $weight;
    font-style: $style;
    font-stretch: none;
  }
}

note that EOT and SVG format fallbacks are no longer required

Web fonts in email

via http://templates.mailchimp.com/design/typography/

While web fonts may be common in traditional website design, in the world of HTML email, they’re experimental at best. If you want to work on the ragged edge of email technology, however, you do have a few options. A (really) small number of email clients support the @import* CSS at-rule, which allows the use of web fonts provided through services like Google Web Fonts or Fontdeck.

Outlook2000 (crazy, we know)
iOS Mail
Apple Mail
Android (default client, not Gmail)
Thunderbird

Note: @font-face and <link> really only work on Apple desktop and mobile clients.

Icon web fonts

When building a site with multiple custom icons you can save on http requests by bundling them all up in to a webfont using Thiago de Mello Bueno (Unlicensed)'s little piece of magic: https://github.com/madeofpeople/makesvgfont

Fonts