Use Custom Fonts in Drupal CSS (TTF/ODT/WOFF/ SVG)

Being able to use stylish fonts in Drupal is easier than you might think. It is also important to point out that the following method is compatible with the latest versions of all major browsers.

STEPS

1. Copy the different font formats in the theme folder.

2. Use the following code to import the font into the Stylesheet:

@font-face{
   font-family: 'WeirdFont'; src:url('weirdfont_path.eot')format('eot'),
   src:url('weirdfont_path.eot?#iefix')format('embedded-opentype'),
   url('weirdfont_path.woff')format('woff'),
   url('weirdfont_path.ttf')format('truetype'),
   url('weirdfont_path.svg#gotham')format('svg'); }

3. Call the font from anywhere in your CSS file using the font name that you declared above:

h2.weird-font {
   font-family:'WeirdFont', Helvetica, Arial, Verdana; }

If using the previous format is not your thing. there are other ways of using custom fonts in your drupal website such as the following:

- Fontyourface module: Enable the use of imported fonts from different services such as Typekit.com, Google Fonts, Font Squirrel, KERNEST, Fontdeck and Fonts.com. I personally tried using my own important fonts but it didn't work, all other fonts from those above work perfect.

- Google Webfont Loader module: Enable you to import fonts from the Google WebFont Service. Down side is that Google has only around 200 free fonts.