[Drupal] How to add web font to your site?

Specialized fonts beyond the typical “Arial, Geneva, Helvetica” can be embeded to your site by uploading Web Open Font Format file for the needed font in your site. Aesthetics is often very important for any website you design. If it isn't pleasing to the eyes, it will directly affect traffic. Fonts are a very important in aesthetics and readability. If you are not sure of how to add web fonts to your site then read on.

WOFF is an acronym that stands for “Web Open Font Format.” it is used to compress fonts for use with the CSS @font-face property. In order to use webfont, you need to upload a WOFF file to your web server, give it a name with the @font-face property, and then call the font in your CSS file.

1. Upload the font called myWoffFont.woff to your server.
2. In your CSS file add a @font-face section:
   

     @font-face {
       font-family: myWoffFont;
       src: url('/fonts/myWoffFont.woff') format('woff');
     } 
     

3. Add the new font name (myWoffFont) to your CSS file
   

     body {
       font-family: myWoffFont, Geneva, Arial, Helvetica, sans-serif;
     } 
   

You can download myWoffFont.woff file from github.com. Hope this helps.