Probelm in using google font apis

Question

Hi all,

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

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.

Answer 2

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.