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;
}











