title: change Jquery UI fonts with @fontface
body: <p>I'd like to change the font-family used by Jquery UI to web font using @fontface. I have created my own css file, named <em>my.css</em> and I supplied it with the follwoing CSS:</p>
  
  <pre><code>@font-face {
      font-family: "Conv_mry_KacstQurn";
      src: url('fonts/mry_KacstQurn.eot#iefix') format('embedded-opentype'),
      url('fonts/mry_KacstQurn.woff') format('woff'), url('fonts/mry_KacstQurn.ttf') format('truetype'), url('fonts/mry_KacstQurn.svg') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  body *{
  font-family: "Conv_mry_KacstQurn";
  }
  </code></pre>
  
  <p>The code of my page header section is as the follwoing:</p>
  
  <pre><code>&lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
          &lt;title&gt;jQuery UI Example Page&lt;/title&gt;
  &lt;link type="text/css" href="css/my.css" rel="stylesheet" /&gt;
          &lt;link type="text/css" href="css/custom-theme/jquery-ui-1.8.22.custom.css" rel="stylesheet" /&gt;
  
          &lt;script type="text/javascript" src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"&gt;&lt;/script&gt;
  
  
          &lt;script type="text/javascript"&gt;
  /* initiation of UI code */
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
              /*demo page css*/
              body{ font: 62.5% "Conv_mry_KacstQurn", sans-serif; margin: 50px;}
              .demoHeaders { margin-top: 2em; }
              #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
              #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
              ul#icons {margin: 0; padding: 0;}
              ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
              ul#icons span.ui-icon {float: left; margin: 0 4px;}
          &lt;/style&gt;
      &lt;/head&gt;
  </code></pre>
  
  <p>Using body * in my.css makes everything well and the web font is rendered in the Jquery UI elements as well. <strong>The problem is when I want to use multiple font families in the page. So I want to know how to set a web font to be used with Jquery UI elements without using body * selector?</strong> </p>