Since iOS 10.3 it seems like the font fallback in the HTML5 canvas is broken.
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: "Avenir Next Rounded W01";
src: url("AvenirNextRoundedStd-Reg.otf") format("opentype");
}
</style>
</head>
<body>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #000000;">
</canvas>
</body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "normal normal 20pt Avenir Next Rounded W01, monospace";
ctx.fillText("gig",0,30);
window.setTimeout(function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
ctx.font = 'normal normal 20pt Avenir Next Rounded W01, monospace';
ctx.color = '#F00';
ctx.fillText("gig",10,30);
}, 3000);
</script>
</html>If you provide the custom font then on the first paint the canvas will show garbage. After the timeout the font is loaded and the customt font is used.
If you do not provide the custom font then both times the fallback is used.
This behavior is true for mobile Safari and WKWebView on iOS 10.3, iOS 10.3.1 and iOS 10.3.2 beta1 and beta2.
In older versions of iOS (<10.3) the Canvas just used the fallback while the custom font was loading. AFAIK there is no way to tell if a custom font is loaded and ready to use so I guess this is a bug!?
Stefan
