back to listing index

How do I embed Google Web Fonts into an SVG?

[web search]
Original source (graphicdesign.stackexchange.com)
Tags: font css svg embedding
Clipped on: 2016-04-30

Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Join
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

asked Dec 21 '11 at 23:58
Image (Asset 2/8) alt=
Jules Mazur
3023614
up vote 17 down vote accepted

You embed fonts in CSS by using base64 encoding. You can apply styles in SVG documents similar to CSS by using a <style /> element. So if you have a WOFF font, you'd embed it like this:

<style>
@font-face {
    font-family: "Sample font";
    src: url("data:application/font-woff;charset=utf-8;base64,...");
}
</style>

Where ... is the base64 encoded font data.

You can find examples of this by looking at Typekit's stylesheets. I'm not sure if the mime type of font/woff is correct, as I've also seen people claim that it should be application/font-woff. Though font/woff, font/truetype, font/opentype, etc. seem to be more popular.

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.

answered Dec 22 '11 at 6:57
Image (Asset 3/8) alt=
Lèse majesté
3,4101119
    
@Verandaguy: You can either put in a separate CSS file just like you would an HTML document, or you can embed it in a <style> element like so. – Lèse majesté Dec 23 '11 at 4:57
    
@Verandaguy: I don't see a <style> element anywhere in that SVG document. – Lèse majesté Dec 23 '11 at 16:23
    
@Verandaguy: A few problems here. First off, FontSquirrel generated a bunch of CSS for embedding all the different styles of Ubuntu (e.g. bold and italic), and it used 'UbuntuRegular' as the font-family name for the regular version. I removed all the unused fonts, leaving just UbuntuRegular and renamed that to Ubuntu to match the font name you used later in your document. Secondly, there was an extra </svg> right after the style definitions. So everything after that was treated as junk data. Once I removed that, it worked fine. – Lèse majesté Dec 23 '11 at 18:53
1  
The correct MIME-type for .woff is now application/font-woff. stackoverflow.com/a/5142316/90674 – sshow Dec 10 '13 at 13:09
1  
Regarding "you could actually take the SVG version of the web font and embed the SVG font's description markup inside of your document", you should be aware that "SVG Fonts are currently supported only in Safari and Android Browser." See developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts (also caniuse.com/#feat=svg-fonts) – Luke Jan 13 '15 at 20:29

A <defs> section like

<defs>
  <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
</defs>

works.

answered Sep 28 '12 at 14:53
Image (Asset 4/8) alt=
leighman
1736
2  
In current (February 2016) web browsers, this works only when loading the SVG file stand-allone. See marians.github.io/test-webfonts-in-svg/test.svg for an example. Opening the same SVG within an HTML page, the font is not loaded/rendered. Use marians.github.io/test-webfonts-in-svg as an example. – Marian Feb 16 at 13:40

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.

answered Dec 27 '11 at 18:01
Image (Asset 5/8) alt=

Add the following after <desc> tag

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>
answered Jan 9 '15 at 10:33
Image (Asset 6/8) alt=

asked

4 years ago

viewed

21933 times

active

1 year ago

130 People Chatting

The Ink Spot

4 hours ago - joojaa
Image (Asset 7/8) alt=Image (Asset 8/8) alt=

The Looking Glass

Apr 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

Hot Network Questions

Technology Life / Arts Culture / Recreation Science Other
  1. Stack Overflow
  2. Server Fault
  3. Super User
  4. Web Applications
  5. Ask Ubuntu
  6. Webmasters
  7. Game Development
  8. TeX - LaTeX
  1. Programmers
  2. Unix & Linux
  3. Ask Different (Apple)
  4. WordPress Development
  5. Geographic Information Systems
  6. Electrical Engineering
  7. Android Enthusiasts
  8. Information Security
  1. Database Administrators
  2. Drupal Answers
  3. SharePoint
  4. User Experience
  5. Mathematica
  6. Salesforce
  7. ExpressionEngine® Answers
  8. more (13)
  1. Photography
  2. Science Fiction & Fantasy
  3. Graphic Design
  4. Movies & TV
  5. Seasoned Advice (cooking)
  6. Home Improvement
  7. Personal Finance & Money
  8. Academia
  9. more (9)
  1. English Language & Usage
  2. Skeptics
  3. Mi Yodeya (Judaism)
  4. Travel
  5. Christianity
  6. Arqade (gaming)
  7. Bicycles
  8. Role-playing Games
  9. more (21)
  1. Mathematics
  2. Cross Validated (stats)
  3. Theoretical Computer Science
  4. Physics
  5. MathOverflow
  6. Chemistry
  7. Biology
  8. more (5)
  1. Stack Apps
  2. Meta Stack Exchange
  3. Area 51
  4. Stack Overflow Careers
site design / logo © 2016 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0 with attribution required
rev 2016.4.29.3525