Welcome to Drupal Guru

Using @font-face css3 Rules, one can easily embed any true-type fonts or open-type fonts in Drupal or any other Platform based website.


1) Collect font-face Kit of your Fonts.

    Every font-face font kit contains.

  • TrueType Fonts : Useful for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
  • EOT Fonts : Useful for Internet Explorer 4+
  • WOFF Fonts : Useful for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
  • SVG Fonts : Useful for the iPad and iPhone
  • Cufón Fonts in case you want them in it
  • Demo.html and stylesheet.css : Provide you Demonstration of Fonts and their CSS properties.

2) Place all font files in your web directory.

    For Drupal : /var/www/your-site/sites/all/themes/your-theme

3) Define your own @font-face in your style.css

    @font-face {
       font-family: ‘CustomFonts‘;
       src: url(‘font-name.eot‘);
       src: local(‘☺’), url(‘font-name.woff‘) format(‘woff’), url(‘font-name.ttf‘) format(‘truetype’), url(‘font-name.svg#webfonta8W2vKU6′) format(‘svg’);
       font-weight: normal;
       font-style: normal;
    }

      Note : font-name will be the name of your original fonts came with font-kit

4) Use @font-face on your style tags.

     Example : One would like to use above fonts for h1 tags then style.css will have,

     h1{
       font: 12px/14px  CustomFonts, Helvetica, Arial, sans-serif;
     }