SVG + embedded font: how to display text in italic?

Question

My purpose is to create a self containing vectorial logo in SVG = I want to integrate all the font glyphs inside this SVG file.

For one part of my text I need a special font in italic. The font I want (Desyrel) only exists in a single .ttf file. I have then converted that font to SVG (tried different online tools and FontForge).

I have then created an SVG file with the text I want to display and the embedded svg font definitions (selected glyphs only). That looks like:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="800px" height="300px" version="1.1" xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
     <font id="font1" horiz-adv-x="614" >
        <font-face font-family="Desyrel" units-per-em="2048" />
        <glyph unicode="-" d="M109 301v166h376v-166h-376z" />
...
     </font>
  </defs>

   <text x="230" y="100" font-family="Desyrel" font-size="110px" font-style="italic">myText</text>
</svg>

When I do this my font does not appear in italic. I have tried changing the font-style in the font-face definition to 'normal' or even 'italic'.

The problem is I know this font can be displayed in italic. If I include in my SVG:

<style type="text/css">
   <![CDATA[
     @font-face {
       font-family: 'Desyrel2'; 
       font-weight: normal;
       font-style: normal;
       src: url("Desyrel.ttf")
     }
   ]]>
</style>

and use that font-family for the text, the text is indeed displayed in italic. But that solution defeats my original purpose to have a self contained SVG...

I don't know much about fonts or SVG but I have searched extensively on the web to find solutions or clues for my problem.. that's why I need your help!

Answer 1

Your font isn't italic, what happens in the TTF case is that the browser synthesizes the italic by adding a small skew transform. It seems this is not done for SVG fonts (probably an oversight).

A solution is to use fontforge to slant the glyphs (if that's all you need), in the menus it's "Element > Style > Italic..." (more info here).

Then generate the svg font.