Htykuut

I am trying to make a woocommerce theme, but the star ratings aren't working properly.

This is the code for showing the star rating.

<div class="rating-custom">

  <?php wc_get_template( 'single-product/rating.php' ); ?>

</div>

This is my CSS

.woocommerce-product-rating {

  margin-bottom: 1.618em;

  line-height: 2;

}

.woocommerce-product-rating .star-rating {

  margin: 0.5em 4px 0 0;

  float: left;

  font-family: star;

}

.woocommerce-product-rating::after, .woocommerce-product-rating .rating-custom, .woocommerce-product-rating::before {

  content: " ";

  display: table;

}

.star-rating {

  float: right;

  overflow: hidden;

  position: relative;

  height: 1em;

  line-height: 1;

  font-size: 1em;

  width: 5.4em;

  font-family: star;

}

.star-rating::before {

  content: "SSSSS";

  color: #d3ced2;

  float: left;

  top: 0;

  left: 0;

  position: absolute;

}

.star-rating span {

  overflow: hidden;

  float: left;

  top: 0;

  left: 0;

  position: absolute;

  padding-top: 1.5em;

}

.star-rating span::before {

  content: "SSSSS";

  top: 0;

  color: red;

  position: absolute;

  left: 0;

}

But my result is only "$$$"

actual result

Can someone help me on how to make this work the way i want?

Following Obsidian Age answer, i've added this line of code to my span tag: font-family: 'star'

And now everything is running smooth. Ty to zipkundan aswell for the help!