Is there any way to embed a Google Web Font script in an SVG file?

StackOverflow https://stackoverflow.com/questions/8597732

Question

I'm new to SVGs, and just made my first decent graphic in Illustrator. I've embedded it into a page (using the <embed> tag) with the Google Web Fonts script for the Ubuntu font in the <head> tag, but 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 this be done?

Here's a link to the SVG file in question.

Was it helpful?

Solution

Here's an example of using a couple of different webfonts inside an SVG.

The current version of the script provided by google web fonts doesn't work in svg. It would be very easy for google to fix though.

Here are some examples using google web fonts in svg with the other methods mentioned:

OTHER TIPS

I don't think this really works yet for linked SVG, for example here is the Firefox bug. It does work if you inline the SVG in the HTML and then create CSS rules like this:

svg .text { 
    font-family:"Familiar Pro Bold", 'Helvetica Neue', Arial, Helvetica, sans-serif; 
    font-weight:bold; 
    font-style:normal; 
}

Of course, this is only going to work in HTML5 capable browsers. Here's an example.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top