Special characters from a custom typeface not showing up in html

15 viewscsshtmllinux
0

I’m using the HP49 typefaces from hpcalc.org, specifically FONT8.TTF, for a small webpage.

The issue is, I cannot get the dark triangle to show properly. In the HTML, it is displayed as "†" (with a fallback font), and the actual character is not displayed at all.

@font-face {
    font-family: 'F8';
    src: url('./FONT8.TTF')  format('truetype')
}
.SC {
    font-family: 'F8';
    background-color: #A8C0B0;
    color: black;
}
<div class="column has-text-right">
    <p id="text" class="SC">
        †<!--non-printable character here-->{{ text }}
    </p>
</div>
<div class="column">
    <input type="" class="SC" v-model="text">
</div>

In the image link below, the right input box is linked to the left paragraph using Vue.
Manually typing the character using Ctrl+Shift+u then "86" works fine, but again, it doesn’t work in the left paragraph, which is what I actually want. Also KFontView shows it properly.

In addition, doing vm.text += "u0086"; appends the character that I want in the input box but not in the paragraph.

Note: The xxd of the .html file shows the inserted character using Ctrl+Shift+u in vscode as c286. Changing it as, e.g. 2086 doesn’t work either.

example