How do I embed Google Web Fonts into an SVG?

Question

I'm writing an article on my site about the advantages of new web technologies, among others HTML5, CSS3 and SVGs, one of the advantages of the latter being the ability to select text in what is otherwise effectively an image. I'm new to SVGs, and just made my first decent graphic in Illustrator. I've embedded it into a page with the GWF script for the Ubuntu font in the tag. As it turns out, the Ubuntu font displays correctly in regular text, but for this trick to work in the SVG, the Google script has to be embedded in the SVG itself. How can I do this?

Answer 1

The best practice for this is to create an outline for any and all font in an SVG. Calling on the font within an SVG is not always supported depending on what program is serving the SVG data like google chrome or adobe illustrator.

To crate font outline simply select the font, click on The "Type" option in the top menu and click create outlines. Like magic your font is converted into a vector object. Note that you cannot edit the text after this because illustrator sees it as a shape. I hope this helps!