title: Efficient way to display German character 'ß' as is on browser instead of 'ss'
body: <p>I have a German site and the character <code>ß</code> does not seem to display as it is when the text has uppercase text transform in CSS. It displays as <code>ss</code> instead.</p>
  
  <p>I checked some solutions and I have read that it is the font not supporting German character but I am not sure why the issue only occurs when the text is transformed to uppercase.</p>
  
  <p>Currently, I have the solution JS and CSS solution:</p>
  
  <pre><code>jQuery(document).ready(function(){
      jQuery('h1, p, a, strong, b, em, i, label').each(function(){
          html = jQuery(this).html();
          if (jQuery(this).children().length == 0 &amp;&amp; html.indexOf("no-uppercase") &lt; 0) {
              jQuery(this).html( jQuery(this).html().replace( /ß/g, '&lt;span class="no-uppercase"&gt;ß&lt;/span&gt;' ) );
          }
      });
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.no-uppercase {
      text-transform: none !important;
  }
  </code></pre>
  
  <p>But I am wondering if there is any more efficient way to have the character display correctly.</p>