1

I created some custom tabs for my WooCommerce page, which includes the name Größe, which means sizes in German. The font I'm using is futura-pt, loaded via typekit and the font includes the German letter ß. But in the frontend it's changed by double ss, so instead of Größe it's Grösse. How can I fix that, to get the ß displayed.

That's the code I'm working with inside my functions.php. I also tried to replace it with the html tag ß, with no effects. Why I'm also confused is, that the third letter ö is also a special character, but that one works perfectly, without doing something.

if ( ! empty( $product_benefits ) )
    $tabs['size_tab'] = array(
        'title'    => __( 'Größen', 'woocommerce' ),
        'priority' => 50,
        'callback' => 'benefits_product_tab_content'
    );

Example image

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
p_e_88
  • 1,029
  • 11
  • 24
  • 1
    Is it possible you have `text-transform: uppercase` on the text? This would be relevant: https://stackoverflow.com/questions/17099163/how-can-i-prevent-the-browser-from-changing-%C3%9F-to-ss – AKX Mar 06 '19 at 10:18
  • I think it's time for a coffee break. Thx made. That was the problem – p_e_88 Mar 06 '19 at 10:21
  • Converted to answer, feel free to accept. :) – AKX Mar 06 '19 at 10:23

1 Answers1

1

The uppercase of ß is SS – if your element has text-transform: uppercase, that would cause this transformation.

See How can I prevent the browser from changing ß to ss?

AKX
  • 152,115
  • 15
  • 115
  • 172