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?

Upload the fonthttp://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:

      @font-face {
          font-family: 'Purisa';
          src: local('Purisa'),
               url('/Purisa.ttf') format('truetype');

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.



Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. Note: in order to facilitate peer review and fight vandalism, we will store your IP number for a number of days. See Privacy for more information. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

To save this page you must answer this question:

Please say HELLO.