Menu
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.
388
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.
43
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:
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
