At the moment, I have this in my template.php

drupal_add_css('https://fonts.googleapis.com/css?family=Short+Stack',array('type' => 'external'));

I now have the .woff is the theme's folder. What's the proper way to add it?


1 Answer 1

  1. Use the google-webfonts-helper or a similar tool to download all possible font formats (only *.woff won't be enough regarding cross-browser compatibility).
  2. Store the font files somewhere in your theme, maybe in a subfolder called /fonts.
  3. Use @font-face in your CSS to load the fonts as described in this brilliant CSS-Tricks article: Using @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('../fonts/webfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

body {
  font-family: 'MyWebFont', SomeFallbackFont, sans-serif;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.