Jay Taylor's notesback to listing index
How do I embed Google Web Fonts into an SVG?[web search]
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?
You embed fonts in CSS by using base64 encoding. You can apply styles in SVG documents similar to CSS by using a
You can find examples of this by looking at Typekit's stylesheets. I'm not sure if the mime type of
Alternatively, you could actually take the SVG version of the web font and embed the SVG font's description markup inside of your document (though browser support is still very limited as Luke notes in the comments).
However, you should also be able to link to an external font according to the SVG specification. That would seem to be the best solution if you're gonna have multiple SVG documents referencing that font.
This may be over simplifying, but have you considered downloading the font as a zip file from google and then letting Illustrator convert it as needed into your SVG file output?
This is only theoretical as I haven't tried this yet, but in theory would seem to work.
Add the following after
Sign up or log in
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Not the answer you're looking for? Browse other questions tagged svg web-fonts or ask your own question.
4 years ago
130 People Chatting
The Ink Spot4 hours ago - joojaa
The Looking GlassApr 24 at 12:35 - johnp
Get the weekly newsletter! In it, you'll get:
- The week's top questions and answers
- Important community announcements
- Questions that need answers
see an example newsletter
Hot Network Questions
- I came across plagiarism. Whom should I inform if at all?
- Why is it that people are so surprised that graphics design can be hard?
- Strange formula in the solution to a chemical problem
- LEVEL connections
- What's the expression for the following combination?
- "You can't learn a musical instrument ______________ you practise every day"
- Interview coding test: Fizz Buzz
- How to prevent drafting?
- Should I use a credit repair agency?
- How would I know if I were a 1 mm tall robot?
- How well does it work to just throw in all the ingredients and boil?
- Are black Americans responsible for more than 50% of homicides?
- Run through an array
- Are classic cars safe?
- Word for pending project or collaboration
- Averaging exam scores with very different means/distributions
- How do you solve a linear equation of matrices?
- You have prepared. You are determined. You approach the door
- How Does Kylo Ren not stop Chewbacca's blaster?
- Is it safe to rename argc and argv in main function?
- Potatoes were alive and sprouted on Mars: How were they preserved on the journey there?
- Is it possible to add RAM to Raspberry Pi?
- Exploded substrings
- Which formula for the de Broglie wavelength of an electron is correct?
|Technology||Life / Arts||Culture / Recreation||Science||Other|