2012-09-29 External Fonts for SVG Files

I was writing a Perl CGI script that takes a SVG file I created with Inkscape, replaces a few placeholders and serves it via the web. How to supply this SVG file with an external TrueType font?

a Perl CGI

TrueType

• Upload the font* – http://campaignwiki.org/Purisa.ttf

http://campaignwiki.org/Purisa.ttf

• Add an appropriate MIME type* – in the directory where the font file is, register an appropriate MIME type in your .htaccess file:

AddType application/x-font-ttf        .ttf

If you are creating a new `.htaccess` file, remember it needs a permission like `-rw-r--r--`.

• Add an external style sheet to the SVG file* – it is not obvious how to do this in Inkscape. I guess you can open the XML Editor and add an svg:style element. I just pasted the following into the beginning of my SVG file:

  <style
     type="text/css">
      @font-face {
          font-family: 'Purisa';
          src: local('Purisa'),
               url('/Purisa.ttf') format('truetype');
      }
  </style>

• Care about Internet Explorer?* I don’t have access to IE at the moment. I read that you might need to add an `.eot` file to support IE, and that would also require another MIME type to be added. You can convert a `.ttf` font to an `.eot` font using ttf2eot on the web.

support IE

another MIME type

using ttf2eot on the web

​#Software ​#Web