Andrej Koelewijn

I’m working on a small javascript library to use svg drawings for presentations. This would allow you to display a single svg drawing similar to normal presentations on slideshare or speakerdeck. You can see the current state here: SVG Presenter test.

I wanted to see if you can use webfonts in an svg drawing in Inkscape. Found out it is doable. You can download fonts using the css rule @font-face. SVG supports css @font-face.

Here’s an example with four different fonts, all webfonts downloaded from google web fonts.

Inkscape doesn’t have official support for webfonts, but you can add the required css to the xml source. Here is an example, usually the defs element already exists and you need to add the style element:

  <defs id="defs2987">
    <style
       type="text/css"
       id="style7">@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: normal;
  src: local('Shadows Into Light'), local('ShadowsIntoLight'), url('http://themes.googleusercontent.com/static/fonts/shadowsintolight/v3/clhLqOv7MXn459PTh0gXYHW1xglZCgocDnD_teV2lMU.woff') format('woff');
}
</style>
  </defs>

You can import fonts that you don’t have installed locally, but Inkscape will not allow you to select the font. You can however edit the svg source code to modify the style of some text to use the webfont. In the drawing above the first three fonts i used i have installed on my laptop, the fourth isn’t on my computer. Inkscape will show an error icon, but you can ignore it.