...
Once upon a time, comic sans was the most exciting font on the web. No longer.
Procuring Fonts
TODO: licensing, purchasing model
Providers
Free
Paid
...
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 families available for use on web and desktop.
- Getting started with desktop fonts.
- Font Sending: You can send any of your subscription fonts to a colleague and they are free to use the font for 7 days.
- webtype.com
- myfonts.com
Paid (no Kalamuna account)
- typekit.com (Adobe)
- linotype.com
Using Web Fonts
how we For Drupal
Probably the easiest way to do this in Drupal
self-hosting vs 3rd party CDN
using a module vs hardcoding in tempates
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 :
| Code Block | ||
|---|---|---|
| ||
/**
* 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:
| Code Block | ||
|---|---|---|
| ||
@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/
...
Note: @font-face and <link> really only work on Apple desktop and mobile clients.
Icon web fonts
Thiago de Mello Bueno (Unlicensed)'s little piece of magic to combine your icons into a web font: https://github.com/madeofpeople/makesvgfont
However, you should probably never do this. The main argument of this approach was to improve performance on page load by reducing the number of requests that the browser would need to make for all the needed files. However, with the adoption of HTTP/2 browsers now can bundle a bunch of file requests in a single connection, and don't have to wait for the server to respond to each individually. https://stackoverflow.com/questions/36517829/what-does-multiplexing-mean-in-http-2
...