title: SVG + embedded font: how to display text in italic?
body: <p>My purpose is to create a self containing vectorial logo in SVG = I want to integrate all the font glyphs inside this SVG file.</p>
  
  <p>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).</p>
  
  <p>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:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;svg width="800px" height="300px" version="1.1" xmlns = 'http://www.w3.org/2000/svg'&gt;
    &lt;defs&gt;
       &lt;font id="font1" horiz-adv-x="614" &gt;
          &lt;font-face font-family="Desyrel" units-per-em="2048" /&gt;
          &lt;glyph unicode="-" d="M109 301v166h376v-166h-376z" /&gt;
  ...
       &lt;/font&gt;
    &lt;/defs&gt;
  
     &lt;text x="230" y="100" font-family="Desyrel" font-size="110px" font-style="italic"&gt;myText&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>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'.</p>
  
  <p>The problem is I know this font can be displayed in italic. If I include in my SVG:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
     &lt;![CDATA[
       @font-face {
         font-family: 'Desyrel2'; 
         font-weight: normal;
         font-style: normal;
         src: url("Desyrel.ttf")
       }
     ]]&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>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...</p>
  
  <p>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!</p>