custom font symbol for star, how to change in css

Issue

I have weird issue, I'm using custom font in my project, when I add the * in html code it appears as a special symbol, I will provide picture for it symbol appearing instead of *

   <label for="{{ field.id_for_label }}">
            {{ field.label }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}</label>

the class asteriskField must render it as *, currently I have made it to not appear,

.asteriskField {
    display: none;
}

/* style.css */
@font-face {
    font-family: 'AlJazeera'; /*a name to be used later*/
    font-display: swap;
    src: url('./fonts/Al-Jazeera-Arabic-Regular.ttf'); /*URL to font*/
}

So what I should do so the star symbol render as usual ?

I have tried contents: "*" , but it doesn't appear as normal star

Solution

I took the liberty to turn my comment into an answer.

The asterisk gets rendered with the font you've set for the page, which is Al Jazeera. You can revert this decision by setting the font family to initial:

html,
body {
  font-family: "AlJazeera", Arial, sans-serif;
}

.asteriskField {
  font-family: initial;
}

<p>
  This text has the Al Jazeera font, but not the asterisk<span class="asteriskField">*</span>
</p>

The difference from this answer is that font-family: none is not a valid value for font-family. It may work, but it is not standardized.

Answered By - Nikita Karamov