Weird symbol during preview

Question

The problem: I have a div where I will have a list of selections for users to choose. In this div, i have
to separate the selections. Please refer to this link for image https://i.sstatic.net/17DY1.jpg.

the code is here:

<div id="personal" class="personal"> Personal Details </div>
<div id="menu" class="menu"> Permit </div>
<div id="menulist" class="menulist"> -Apply <br />
    -Renew
    -Track <br />
    -Progress <br />
    -Information </div>
<div class="menu2" id="menu2">Records</div>
<div class="menulist2" id="menulist2">-Permits<br />
    -Training<br />
    -Training Schedule<br />
    -Accidents &amp;  <br />
    &nbsp; &nbsp; &nbsp; &nbsp;Convictions</div>
    </div> 

And the code for CSS is here:

.personal
{
 position:absolute;
 color:#fff;
 top:210px;
 left:20px;
 font-size:20px;
 font-family:'TrajanProBold';
 width:20%;
}

.menu
{
 position:absolute;
 color:#fff;
 top:255px;
 left:20px;
 font-size:30px;
 font-family:'TrajanProBold';
 width:289px;
}

.menulist
{
position:absolute;
color:#fff;
top:295px;
left:60px;
font-size:20px;
font-family: 'TrajanProRegular';
width:23%;
}

.menu2
{
position:absolute;
color:#fff;
top:401px;
left:20px;
font-size:30px;
font-family:'TrajanProBold';
width:285px;
}

.menulist2
{
position:absolute;
color:#fff;
top:441px;
left:60px;
font-size:20px;
font-family: 'TrajanProRegular';
width:23%;
}

Answer 1

Use http://www.fontsquirrel.com/fontface/generator to generate font, If error still persist, most likely its due to the font file that is corrupted. After changing the font file, the matter is solved.