View Single Post
Old 06-14-2014, 09:51 AM   #17
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,801
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by MikeWV View Post
I figured out part of the answer to my original question. The font used in the SVG images is the default font of the device on which it is displayed. For example, if I change the default font in Firefox to Calibri, the font in my SVG images is Calibri when I simply open an SVG file or an XHTML file containing an SVG image in Firefox. I also see Calibri in EPUBReader for Firefox. The default font in ADE is apparently Times New Roman and that cannot be changed.

The part of my question that I haven't figured out is how to specify a non-proprietary or generic sans serif font within the SVG files, within the image tag or in the CSS that will override the font that is set in the software presenting the images to a reader. I really need a sans serif font for the larger tables, as tiny serifed fonts are not clear...
When you want to use a custom font (any non-generic font) in a svg image, you have two ways:

1) Use the font of your election in Inkscape and, before saving the file, convert all the svg graph to "paths"; or

2) On the other hand, if you don't want to convert the font to paths, you have to embed it in the ebook where you are going to use that font. But before using it, you have to declare it in the svg graph by using:

Code:
    <defs>
       <style type="text/css">
         <![CDATA[
           @font-face {
              font-family: "MyFont"; /* Of course this name can vary */
              src: url("../Fonts/MyFont.ttf"); /* And here you'll write the font of your election */
           }
         ]]>
       </style>
    </defs>
You have to add that definition before using it in a <text> tag. For example:

Code:
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     width="155" height="120">
    <defs>
       <style type="text/css">
         <![CDATA[
           @font-face {
              font-family: "Marnie";
              src: url("../Fonts/Marnie.ttf");
           }
         ]]>
       </style>
    </defs>
    <text x="77.5" y="117" style="font-size: 150px; font-weight: bold" font-family="Marnie" text-anchor="middle">T</text>
</svg>
If you are using Sigil, then your .ttf font must be in the Sigil "Fonts" folder and if you are going to use that font only in the svg graph, then is not necessary to include a @font-face declaration in your css stylesheet.

Regards
Rubén

NOTE: Sigil doesn't show the svg embeded fonts (a Sigil bug evidently) but if you open the ePub in ADE, you'll perfectly see your custom font in your svg graph.

Last edited by RbnJrg; 06-14-2014 at 04:56 PM.
RbnJrg is offline   Reply With Quote