Chromium bug: http://code.google.com/p/chromium/issues/detail?id=32879 - Reproduces both on Safari and Chrome. - Does not reproduce on Firefox 3.5. What steps will reproduce the problem? Open the following html file which draws a text on <canvas> using a remote font on onload event. <html><script> function draw() { var fontName = 'RemoteFont'; var canvas = document.getElementById(fontName); var ctx = canvas.getContext('2d'); ctx.font = '14pt ' + fontName + ', "Courier New"'; ctx.fillStyle = 'rgba(0, 0, 0, 1)'; ctx.fillText(fontName, 10, 25); } </script> <body onload='draw()'> <head> <style type="text/css"> <!-- @font-face { font-family: 'RemoteFont'; src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf') format('truetype'); } --> </style> </head> <table> <tr> <td><canvas id='RemoteFont' x='20' y='20' width='250' height='50' style='border: 1px solid red'></td> <td><div style='font: 14pt RemoteFont'>RemoteFont in html</div></td> </tr> </table> </body></html> What is the expected output? A text is drawn. What do you see instead? Nothing is drawn. Please use labels and text to provide additional information. fillText() function for <canvas> seems not to wait for a remote font to be finished downloading and seems to give up writing a text early (please note that the onload function is called _before_ a remote font is finished downloading). I also confirmed that fillText() can write a text on a <canvas> element using a remote font if the font is already downloaded. For example, if I rewrite the onload function as follows, fillText() in draw() may work fine. <body onload='setTimeout(draw, 10000)'>
This bug may be solved if we fix: https://bugs.webkit.org/show_bug.cgi?id=25207 Make this bug dependent on 25207 for easier tracking.