Login/Register
Is there any way to embed a Google Web Font script in an SVG file?
Asked Answered
Solved fontscross-browsersvggoogle-webfonts
T

2

7

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.

Titlark answered 21/12, 2011 at 23:30 Comment(0)
C
11

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:

Cladoceran answered 22/12, 2011 at 8:47 Comment(2)
Why would it be pointless for Google to make its web font script SVG-compatible? – Titlark
Not pointless at all, I think that it would be very helpful if the google fonts script worked for svg and html alike. It doesn't list xml-stylesheets as a way to include the fonts either. – Freudian
L
2

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.

Lycanthropy answered 22/12, 2011 at 1:6 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.