# 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?

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.

Tags: