How do I apply cufon.js only for Internet Explorer, in template.php?

Question

I have some font problems in Internet Explorer, so I am trying to apply font-family through JavaScript. It works, but the JavaScript code runs for every browser.

How do I run JavaScript code only on Internet Explorer?

This my code.

drupal_add_js('sites/all/themes/blogbuzz/js/cufon-yui.js');
drupal_add_js('sites/all/themes/blogbuzz/js/Helvetica_CE_35_Thin_100.font.js');
drupal_add_js('(function ($) {
  $(document).ready(function() {
    Cufon.replace("#content-header");
    Cufon.replace("#client_tle");
    Cufon.replace("#block-block-16");     
  });
})(jQuery)', "inline");

Answer 1

You can't apply JS only to one browser using Drupal functions. What you can do is:

• CSS workaround:

  • apply CSS only to IE
  • assign some style that will not be visible, but also will not be present in non-IE, like white 1px border on white background
  • use css() jQuery method to test if element has property you expect it to have in IE, and if true, execute your code.

• JavaScript way: Use jQuery Browser Plugin or similar solution to identify browser inside your js file. Execute your code if it's the browser you need it executed in.

Answer 2

Something like this is what you are looking for:

function yourtheme_preprocess_html(&$variables) {
  // Add conditional stylesheets for IE
  drupal_add_css(path_to_theme() . '/css/ie8style.css', array(
    'group' => CSS_THEME,
    'browsers' => array(
      'IE' => 'lte IE 8',
      '!IE' => FALSE,
     ),
    'every_page' => TRUE,
    'weight' => 10,
   )
  );
}