Star rating formatting problems

[bobbingwide]

Star ratings displayed on the single-product.html template and in blocks which display ratings are displayed with a series of S's over the grey stars.

[bobbingwide]

In a theme where the star rating field works ( eg Genesis-A2Z ), the HTML for the star rating block is:

<div class="wc-block-grid__product-rating">
<div class="star-rating" role="img" aria-label="Rated 4.00 out of 5">
<span style="width:80%">Rated 
<strong class="rating">4.00</strong> 
out of 5 based on <span class="rating">3</span> customer ratings</span>
</div>
</div>

In Wizzie it's

<div class="wc-block-grid__product-rating">
<div class="star-rating" role="img" aria-label="Rated 4.00 out of 5">
<span style="width:80%">Rated 
<strong class="rating">4.00</strong> 
out of 5 based on <span class="rating">3</span> customer ratings</span>
</div>
</div>

which is the same.

So there appears to be a JavaScript/CSS problem.

[bobbingwide]

So there appears to be a JavaScript/CSS problem.

It's a CSS problem, due to the following code in the Fizzie parent theme's style.css

 * {
    font-family:  Lato, sans-serif;
 }

The overrides the font defined in

.woocommerce .star-rating {
    float: right;
    overflow: hidden;
    position: relative;
    height: 1em;
    line-height: 1;
    font-size: 1em;
    width: 5.4em;
    font-family: star
}

[bobbingwide]

This is now resolved on woocommerce.wp-a2z.org