tl;dr: It is a fall-back font of which every glyph is zero width. It can be, for example, used as a substitute font while the actual web font loads; the text width of zero indicates that the web font is yet to be loaded.
You're not using an actual image, just an image object. Set the src attribute of the image object to the URL of the webfont and the browser will call the onerror callback when it finishes loading.
Just because a font has "loaded" does not mean it's ready to be used. This very problem makes it hard to load @font-face fonts on demand in <canvas> apps as there is a certain amount of time you must wait for the font to actually load that is not exposed or accounted for in any browser APIs. Even if you include a font in @font-face with a data: URI, you cannot immediately start using it.
