I've usually just done conditional logic to wrap the inline roll in a class and then used the before element to display the font. (done this a lot for some recent sheets that have specialty dice)
HTML
<rolltemplate class="sheet-rolltemplate-number">
{{#rollTotal() roll 1}}
<div class="roll result-1">
{{roll}}
</div>
{{/rollTotal() roll 1}}
{{#rollTotal() roll 2}}
<div class="roll result-2">
{{roll}}
</div>
{{/rollTotal() roll 2}}
</rolltemplate>
CSS
.sheet-rolltemplate-number .sheet-roll .inlinerollresult{
display: grid;
grid-template-areas: 'content';
color: transparent;
position: relative;
place-items: center;
}
.sheet-rolltemplate-number .sheet-roll .inlinerollresult:before{
grid-area: content;
position: absolute;
font-family: 'dicefontd10';
}
.sheet-rolltemplate-number .sheet-result-1 .inlinerollresult:before{
content: 'A';
}
.sheet-rolltemplate-number .sheet-result-2 .inlinerollresult:before{
content: 'B';
}
This maintains the ability to hover over the roll and get the tooltip showing the quantum roll information. It also keeps the information for screen readers to parse.