@font-face {
  font-family: "HelveticaNeueLTStd67MediumConde";
  src: url(HelveticaNeueLTStd-MdCn.eot); /* IE */
  src: local('Helvetica Neue LT Std 67 Medium Condensed'), local('HelveticaNeueLTStd-MdCn'),
  url('fonts/HelveticaNeueLTStd-MdCn.woff') format('woff'), url('fonts/HelveticaNeueLTStd-MdCn.ttf') format('truetype');
}

h1{
  font-family: "HelveticaNeueLTStd67MediumConde"; /* you must enter the font name if you wish to use it */
  font-size: 25px;
}

That’s the code in declaring the @font-face. So all h1 will now have Helvetica Neue font.

Note:

For cross browser issue, not all browsers support font-face so in the meantime IE4+, Safari 3.1, Chrome, Firefox 3.1+ and Opera 10 can support @font-face method.

IE browsers uses another format so be sure to have the IE code inserted.

      src: url(HelveticaNeueLTStd-MdCn.eot); /* IE */

@font-face can use the local fonts so if the font is already in the computer, it will use the local font rather than using the uploaded font that will take time to load.

         src: local('Helvetica Neue LT Std 67 Medium Condensed'), local('HelveticaNeueLTStd-MdCn'),
  url('fonts/HelveticaNeueLTStd-MdCn.woff') format('woff'), url('fonts/HelveticaNeueLTStd-MdCn.ttf') format('truetype');

To convert you font to @face-font compatible font you can visit this link.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}
</script>
<script type="text/javascript" >
jQuery.preloadImages("image1.jpg", "image2.jpg","image3.jpg");
</script>

Try this!

sIFR.activate(fontname);
sIFR.replace(fontname, {
  selector: 'h1.ph1',
  css: '.sIFR-root { color:#b81943; font-size:22px; }'
  ,filters: {
        DropShadow: {
           distance: 1
          ,color: '#000' //drop shadow color
          ,strength: 2
          ,alpha: .3  // for opacity
          ,blurX: 2
          ,blurY: 2
        }
      }
   ,wmode: 'transparent'
});

If you want to change the angle for the drop show, add this code to the filter:

,angle: 20

This is not difficult way but this works.

Try it!

Here’s an example code on how to use this:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script> // declare this 2 script
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
     $j('body').intercept('click', {
              '#elementid' : function(){
                       $j('element2id').text('Hellow World');
               }
      });
});
</script>

my personal website design

Here’s the live site: http://alfecaesarlagas.co.cc/

This is my first wordpress site. Thanks for WooThemes for the free template.

Thank you for viewing. Have a nice day!