title: Cannot change Primefaces p:commandButton font properties
body: <p>I need some customized buttons on my site which look differently than the others.
  I've created a css class for these buttons but it behaves strangely.</p>
  
  <p>this is the class:</p>
  
  <pre><code>.regCommandButton { 
      color: #ffffff;
      background: #29b6a0;
      border-color: #23a38f;
  
      width: 100%; 
      height: 25px; 
  
      font-family: 'pluto_sansthin';
      font-size:1.4em;    
  }
  </code></pre>
  
  <p>font import in the same css file:</p>
  
  <pre><code>@font-face {
  font-family: 'pluto_sansthin';
  src: url(#{resource['fonts/plutosansthin-webfont.eot']});
  src: url(#{resource['fonts/plutosansthin-webfont.eot?#iefix']}) format('embedded-opentype'),
       url(#{resource['fonts/plutosansthin-webfont.woff']}) format('woff'),
       url(#{resource['fonts/plutosansthin-webfont.ttf']}) format('truetype');
  font-weight: normal;
  font-style: normal;
  </code></pre>
  
  <p>}</p>
  
  <p>html implementation:</p>
  
  <pre><code>&lt;p:outputPanel&gt;
    &lt;p:commandButton styleClass="regCommandButton" value="Save" action="#{URBean.saveNewUser}" update="regPanel" /&gt;
  &lt;/p:outputPanel&gt;
  </code></pre>
  
  <p>My problem is that the font related properties (font-family, font-size) are not being set if the button is inside of an <code>p:outputpanel</code> . All the others applies on the button.</p>
  
  <p>If I put the button outside of the outputpanel, everything goes as expected.</p>
  
  <p><strong>EDIT:</strong>
  Using !important for the font properties doesn't help eather.</p>