HTML2Canvas not rendering 'i' in chrome if it follows f

Question

I have a very strange problem with HTML2Canvas. It does not render the letter i if the i follows f in chrome and it capitalises the f. There is no issue in Firefox.

I don't want to change the font, it's an embedded font (Ubuntu), maybe that's the issue?

<script type="text/javascript">
var $loading = $('#loader').hide();
$('#carddownload').on('click', function() {
showimage(); 
});
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
function showimage(){
html2canvas([document.getElementById('card')], {
onrendered: function(canvas)
{
var name = $(".tcgnamecell").html();
var n = name.indexOf("<br>");
var data = {};
data['name'] = name.substr(0); 
data['img'] = canvas.toDataURL();
var n = data['name'].indexOf("<br>");

$.post("save.php", {image: data}, function (file) {
window.location.href ="download.php?path=" + file;
});
}
});
}
</script>

Answer 1

Certain fonts do not render correctly in HTML2Canvas, irrespective of whether you use google fonts or an embedded font. I used a different font. blue highway rg.ttf is similar to Ubuntu.

Answer 2

You can do the following:

document.getElementById('card').style.fontFeatureSettings = '"liga" 0';