Embed Any Fonts in Drupal or Any Other Platform

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

 

Author: Ujval Shah, Project Manager, Gloscon Solutions Pvt. Ltd.

 

Madmayor

CityPlots
RenovationPlaza
BootupFactory
Surgeboom
CheerFools
OpenKick
GujaratCricket
Kinchuk
ChorPolish
Kosansh
Reputa
SharesVault
BeautifulGujarat
PocketBuilders
JaldiBol
GujaratHosting
GujaratStartups
BodyLia
GhumoPhiro
Kukarma
TalentLaunchpad
SabziBazar
WorldImigration
Just2Marry
MobileApplicationTesters
Galaminds
KhetiVikas
OpenMunicipalities