49

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?

  • 1
    One important note regarding the @import based solutions: they don't work for background-images. You must embed the font via base64 or use an image/object tag instead. – Mickey Feb 23 '17 at 20:25
40

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.

14

A <defs> section like

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

works.

  • 13
    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 '16 at 13:40
  • 1
    Both stand-alone SVG and HTML page seem to work the same in Chrome Version 73.0.3683.103 (Official Build) (64-bit). – Paul Grime Apr 18 at 8:47
  • It's loading fonts when I open svg on browser, but when I open the same svg file in Adobe Illustrator, it's not loading fonts. Any help? – Aamir Nakhwa Oct 2 at 12:25
4

You can embed Google Web Fonts into your SVG directly using Nano. It automatically scans your SVG and selectively embed only the fonts required, ensuring that your Ubuntu fonts look the same on all modern browsers. In my case, I needed Roboto to be embedded in my SVG:

enter image description here

Disclaimer: I'm with the team behind Nano, and we too, have faced the same problem previously hence decided to scratch our own itch by building Nano. Hope this is helpful!

Edit: Here's a quick explanation on what happens behind the scene:

To embed fonts in SVG, you first have to know what font families are used. Then you need to find these font files and download them. Once downloaded, you have to convert regular, bold, italics and bold italics to base 64 encoding. If you're doing it manually, it is a huge amount of work, over a large number of files, to know which file uses bold and which ones does not. Then you have to copy all 4 base 64 encoded strings into your SVG.

That's why we build Nano and make sure it scans SVG automatically and insert only the fonts being used. For example, if bold is not used or if no text exist, then no fonts will be embedded. All you need to do is drag and drop your SVG into Nano and it works like a charm! You can learn more here: https://vecta.io/blog/making-svg-easier-to-use

  • OK, great looks good. Unfortunately uploading to a Wordpress site that was quite happy to accept the SVG before now will not "Sorry, this file type is not permitted for security reasons." - what do I need to put back to make this work? – Chris Pink Jun 20 at 16:31
2

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.

0

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>
  • why include so many google fonts? It's not even all of them or the most used I see a lot and will add to SVG overall weight. – MrMesees Apr 7 '17 at 7:29
  • 1
    It's loading fonts when I open svg on browser, but when I open the same svg file in Adobe Illustrator, it's not loading fonts. Any help? – Aamir Nakhwa Oct 2 at 12:29
0

UPDATE to my answer. I now prefer a different answer on this page, which is to use Nano: https://graphicdesign.stackexchange.com/a/121950/45239

Assuming you've downloaded and installed a web font on your system and have created an SVG (maybe using a lot of the same steps as I describe below but not choosing "Font: Convert To Outlines"), you can upload the SVG to Nano and see the "Embed font: Yes" option, and click Download.

My previous answer:

If you're willing to sacrifice having selectable text and SEO:

  1. Download the web font.
  2. Install it locally.
  3. Open Adobe Illustrator
  4. Type your text.
  5. File > Export > Export As…
  6. Choose ".SVG"
  7. Choose these settings:

    • Styling: Inline Style
    • Font: Convert To Outlines
    • Images: Preserve
    • Object IDs: Layer Names
    • Decimal: 2
    • (enabled) Minify
    • (enabled) Responsive
  8. Optionally upload the resulting svg to https://vecta.io/nano (It was able to reduce my file size by 8.2%)

  • Unfortunately 'convert to outlines' is not a great option for smaller text sizes. – Chris Pink Jun 20 at 16:20
  • @ChrisPink, yes you are right !, Please share if you have found any other option for small font size – Super Model Jul 25 at 11:51
  • 1
    @SuperModel I used Nano with great success, with the fonts picking up styles from the enclosing document. My first attempts failed but with the kind help of the Nano team we worked out it was a case of making sure the SVG header stayed intact. – Chris Pink Aug 1 at 10:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.