Fonts

The font settings allow you to set a default font family and font size, as well as applying fonts to various site elements such as the site name, slogan, page title, block, node and comment titles, in content headings (h1 to h6) and to set a font for menu block links.

By default AT Core 7.x-3.x will ship with just one font type - a list of web safe font stacks. However it has built in support for three additional font "types" - Google Fonts, custom font stacks and @font-your-face module integration.

Websafe Font Stacks

These are the simplest to use - just choose from the list of fonts to apply to a particular site element. There are 10 fonts stacks to choose from including an Impact based stack for headings. Here the font stacks in full, in case you would like to use them in your theme. I spent many years developing these stacks and have used them litterally thousands of times, they are very well tested accross browser and platform. Font geeks will notice the rather high prevalence of Microsoft fonts, well, they make good web fonts, its no accident six out of ten stacks start with an MS font:

font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-family: Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif;
font-family: Arial, Helvetica, sans-serif;
font-family: Calibri, Candara, Arial, Helvetica, sans-serif;
font-family: 'Segoe UI', 'Myriad Pro', Myriad, Arial, Helvetica, sans-serif;
font-family: 'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Grande', Verdana, Geneva, sans-serif;
font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', sans-serif;
font-family: Garamond, Perpetua, 'Times New Roman', serif;
font-family: Georgia, Baskerville, Palatino, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
font-family: Consolas, Monaco, 'Courier New', Courier, monospace, sans-serif;

Google Fonts

In 7.x-3.x you can now enter any Google font by name and select additional styles and character sets. All you need to do is find the font you want by surfing the available Google fonts, find one you like and copy the font name to a text field. I find the best way is to use the "Quick-use" feature in Google fonts, the name is in the top left corner and it shows all the available styles and character sets - which you can also enter via check-boxes inside Adaptivetheme.

Google font names are case sensitive, they must match what Google defines exactly. Its best to copy and paste to avoid any spelling or case errors.

Be careful about adding too many Google fonts, its easy to go nuts, but every added font, style or character set will slow down your page loads, especially the first page load for each new visitor. Google has a neat page load performance meter to show you the impact on performance.

@font-your-face

@font-your-face is a very cool module for Drupal that integrates a wide range of external font services including Font Squirrel, Google webfonts, Fontdeck, Fonts.com, KERNEST and Typekit.

To use @font-your-face you must first enable fonts in the @font-your-face library, then set those fonts to "-- add selector in theme CSS --". When you have done this the @font-your-face fonts will be available for you to apply to your content and titles. If you would like to preview Google fonts see: google.com/webfonts, or use the @font-your-face preview feature.

Note: the @font-your-face integration has only been tested with Google webfonts and Font Squirrel, if you run into problems with other providers please submit an issue: http://drupal.org/project/issues/adaptivetheme

Custom Font Stacks

If you would like to use your very own font stack you can, just select the option and enter in any font or font-family you like. Its really that easy, practically a no-brainer. Smashing Magazine has a pretty good article on font stacks which might help you learn more about using your own stacks.

Last updated 16th April, 2012 - 11:20pm