I have utilized the font family americanpurpose1 for my current project, however, I am encountering issues where special characters such as (), #, etc. are displaying as Smiley faces. I have attempted to use HTML symbol codes to resolve this problem, but unfortunately, it has not been successful. Below is the snippet of code I am working with:
.login_heading h2 {
margin: 20px 0;
text-transform: uppercase;
text-align: center;
font-size: 31px;
font-weight: 400;
color: #0d0831;
font-family: americanpurpose1;
text-shadow: none;
}<div class="login_heading">
<h2>Top 100 Graded Comics Sold</h2>
<h2 id="changedate">( Last 1 Week )</h2>
</div>