Integrate with google web fonts

[GoogleCodeExporter]

I think we should allow integration with google web fonts.

I've written a first draught, with patch attached.

This patch makes fonts part of the configuration.

This means you can now do this:

[code]
    svgEditor.setConfig({
            fonts: [['serif', 'Serif'], ['sans-serif', 'Sans-serif'], ['Tangerine', 'Tangerine'], ['Poller One', 'Poller One']],
    });
[/code]

If we see any font not in the default set of [serif, sans-serif, cursive, 
fantasy or monospace] then we will try and load the font from the google web 
fonts api.

I've tested several fonts, most seem to work, some don't, I haven't figured out 
why some work and others don't yet. Hopefully someone can point me in the right 
direction on this.

Original issue reported on code.google.com by jameswri...@draganddrop.co.uk on 31 Oct 2011 at 10:17

Attachments:

• patch.txt

[GoogleCodeExporter]

Sorry, didn't mention fonts is an array of arrays. The first element is the css 
font-name value, the second element is the name as it's to appear in the menu.

Visit http://www.google.com/webfonts for a list of available fonts

Original comment by jameswri...@draganddrop.co.uk on 31 Oct 2011 at 10:21

[GoogleCodeExporter]

Sorry I can't look into this, but does the patch take into account the fact 
that the fonts in the SVG documents themselves need to include a link to the 
font?

Original comment by codedr...@gmail.com on 31 Oct 2011 at 10:34

[GoogleCodeExporter]

Here's some example SVG data:

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <text xml:space="preserve" text-anchor="middle" font-family="Poller One" font-size="111" id="svg_1" y="178" x="192" stroke-width="0" stroke="#000000" fill="#000000">asd</text>
 </g>
</svg>

It calls the font, it doesn't link to it.

I did a quick google and found:

http://www.w3.org/TR/SVG/fonts.html#FontFaceSrcElement

Which seems to be what I would need to 'link' the font. However... For me what 
I've done will work. The only places I would use the SVG file would be svg-edit 
and Inkscape. So I would install the fonts on the local machine, and I would 
imagine by virtue they are called with 'font-family="Poller One"' Inkscape 
would link to the local font.

I don't think it would be difficult to take it further, can you suggest a good 
way of testing the resultant SVG with the linked font?

Original comment by jameswri...@draganddrop.co.uk on 31 Oct 2011 at 10:41

[GoogleCodeExporter]

You can link stylesheets into XML documents just like you can with HTML.  I 
tested it on the following file and it works just fine:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" 
href="http://fonts.googleapis.com/css?family=Tangerine"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <text x="100" y="100" font-size="48px" font-family="Tangerine">Making SVG Beautiful!</text>
</svg>

Original comment by codedr...@gmail.com on 9 Nov 2011 at 10:11

[GoogleCodeExporter]

Related links:

http://groups.google.com/group/svg-edit/browse_thread/thread/6d4890a3b988162c
http://code.google.com/p/svg-edit/issues/detail?id=633
http://code.google.com/p/svg-edit/issues/detail?id=184

Original comment by marclaporte on 5 Jan 2012 at 6:47

[GoogleCodeExporter]

I think this is a very important feature. 

If font portability is an issue, I imagine one can code a workaround by 
embedding the WOFF font as a dataURL in the CSS so that it comes 'bundled' with 
the SVG.

Original comment by adityabh...@gmail.com on 10 Apr 2012 at 7:43

[GoogleCodeExporter]

I think this is important too. Even if in the first instance we cannot get 
around the embedding issue, it would be great for people to be able to use any 
Google Font and then save their resulting pic as a png (for like a logo 
generator or something)...

Original comment by davidosu...@gmail.com on 23 Oct 2012 at 4:45

[GoogleCodeExporter]

I realize that this thread is a little dated, but hopefully I can still get 
some help. I applied the patch code to both svg-editor.html & svg-editor.js but 
It's not working. My dropdown list of fonts never opens. I'm assuming I need to 
link to some fonts somewhere? And, I'm not to sure about this line from the 
OP... 
[code]
svgEditor.setConfig({
            fonts: [['serif', 'Serif'], ['sans-serif', 'Sans-serif'], ['Tangerine', 'Tangerine'], ['Poller One', 'Poller One']],
    });
[/code]

Original comment by bcurrid on 15 Mar 2014 at 9:48

[GoogleCodeExporter]

I am also really interested in letting users compose with custom fonts I chose 
as an admin.

Original comment by raphael....@gmail.com on 17 Mar 2014 at 1:36