Question

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');
        var textNode = document.createTextNode(val);
        newText.appendChild(textNode);
        svgRoot.appendChild(newText)
}

Answer 1

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.