using google font apis

I am working on a web application using SVG.

The plan is to use the Google Webfonts APIs to let the user choose their font type and then have their name rendered in SVG. The problem is that when I use the Google APIs to access the fonts, it does not work (reverts back to Serif font). However, when I download the Google fonts and then refer directly in my web application, it works… Could someone please shed some light on how to get this working for the web applications.

Here is the code so far:

js.onclick=function()

    {
        var val=document.getElementById("txt").value
        var newText = svgDoc.createElementNS("http://www.w3.org/2000/svg","text");
        newText.setAttribute("id", "txxt")
        newText.setAttribute("x",275);
        newText.setAttribute("y",250);
        newText.setAttribute("font-size","50px");
        newText.setAttribute("fill","olive");
        newText.setAttribute("xlink:href",'http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light&subset=latin');
        newText.setAttribute("font-family",'JosefinSansStd-Light');
     开发者_StackOverflow中文版   var textNode = document.createTextNode(val);
        newText.appendChild(textNode);
        svgRoot.appendChild(newText)
}

Basically all what Google API's do is same as @font-face in CSS but simplier to load fonts from different font providers. And CSS @font-face can be applied only on text.

I think you need to do that the other way around... i.e. Google works on text, not on SVG images, so you need to have raw text for the Google Font to work.