Using custom embeded font, and improve embedded image quality

[aknight2015]

I'm trying to use a different font for my ebook. I want to use Alagard font rather than the default font most systems come with. I've embedded the ttf file I need. Also, how do I stop Sigil from over compressing embedded images so that when they are displayed they aren't a pixelated mess.

/* This defines styles and classes used in the book */
body { margin: 5%; text-align: justify; font-size: medium; background-color: #FCF5E5; }
}
code { font-family: "monospace"; }
h1 { text-align: left; }
h2 { text-align: left; }
h3 { text-align: left; }
h4 { text-align: left; }
h5 { text-align: left; }
h6 { text-align: left; }
h1.title { }
h2.author { }
h3.date { }
nav#toc ol,
nav#landmarks ol { padding: 0; margin-left: 1em; }
nav#toc ol li,
nav#landmarks ol li { list-style-type: none; margin: 0; padding: 0; }
a.footnote-ref { vertical-align: super; }
em, em em em, em em em em em { font-style: italic;}
em em, em em em em { font-style: normal; }
code{ white-space: pre-wrap; }
span.smallcaps{ font-variant: small-caps; }
span.underline{ text-decoration: underline; }
q { quotes: "“" "”" "‘" "’"; }
div.column{ display: inline-block; vertical-align: top; width: 50%; }
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}

[Turtle91]

Hi aknight2015 - welcome to MR!

For the font, you have to tell the css to use it and where it is located with something like:

@font-face {
    font-family: 'My Italic';
    font-weight: bold;
    font-style: italic;
    src: url('../Fonts/My_Italic_Bold_Italic.ttf');
}

Then you just add it to the font-family declaration like:

h1 {font-family: 'My Italic', serif}

For the image compression, Sigil doesn't compress the image files at all - it only displays them how you have defined them in the CSS. I use something along the lines of this to display my images:

img {max-height:100%; max-width:100%}
div.image {margin:2em}
div.image img {width:100%; max-width:1200px}


<div class="image"><img alt="" src="../Images/yourimage.jpg"/></div>

The max-width is where I put the images actual width in pixels (the images dimensions) to prevent the image from becoming too stretched on large displays.

[aknight2015]

I don't know if I'm doing something wrong or what, but it's not working, at all. Could you actually show what the code looks like inside the CSS? That might help me understand.

Originally Posted by Turtle91

Hi aknight2015 - welcome to MR!

For the font, you have to tell the css to use it and where it is located with something like:

@font-face {
    font-family: 'My Italic';
    font-weight: bold;
    font-style: italic;
    src: url('../Fonts/My_Italic_Bold_Italic.ttf');
}

Then you just add it to the font-family declaration like:

h1 {font-family: 'My Italic', serif}

For the image compression, Sigil doesn't compress the image files at all - it only displays them how you have defined them in the CSS. I use something along the lines of this to display my images:

img {max-height:100%; max-width:100%}
div.image {margin:2em}
div.image img {width:100%; max-width:1200px}


<div class="image"><img alt="" src="../Images/yourimage.jpg"/></div>

The max-width is where I put the images actual width in pixels (the images dimensions) to prevent the image from becoming too stretched on large displays.

[Turtle91]

Originally Posted by aknight2015

I don't know if I'm doing something wrong or what, but it's not working, at all. Could you actually show what the code looks like inside the CSS? That might help me understand.

That is the actual code you put in the css.

You need to make sure you link the css sheet to all the html sheets that you want the css to apply...

Select/highlight all the html files, then right-click and select 'Link Stylesheets...'

[Turtle91]

CSS:

@font-face {
    font-family: 'My Italic';
    font-weight: bold;
    font-style: italic;
    src: url('../Fonts/My_Italic_Bold_Italic.ttf');
}

h1 {font-family: 'My Italic', serif}

img {max-height:100%; max-width:100%}
div.image {margin:2em}
div.image img {width:100%; max-width:1200px}

HTML:

<h1>Heading Level 1 with your specific font</h1>


<div class="image"><img alt="" src="../Images/yourimage.jpg"/></div>

[aknight2015]

This is what my CSS looks like

/* This defines styles and classes used in the book */
body { margin: 5%; text-align: justify; font-size: medium; background-color: #FCF5E5; }
}
{
   font-family: 'ChomskyRegular';
   font-weight: normal;
   font-style: normal;
   src: url('../Fonts/Chomsky.otf');
}
code { font-family: "ChomskyRegular"; }
h1 { text-align: left; }
h2 { text-align: left; }
h3 { text-align: left; }
h4 { text-align: left; }
h5 { text-align: left; }
h6 { text-align: left; }
h1.title { }
h2.author { }
h3.date { }
nav#toc ol,
nav#landmarks ol { padding: 0; margin-left: 1em; }
nav#toc ol li,
nav#landmarks ol li { list-style-type: none; margin: 0; padding: 0; }
a.footnote-ref { vertical-align: super; }
em, em em em, em em em em em { font-style: italic;}
em em, em em em em { font-style: normal; }
code{ white-space: pre-wrap; }
span.smallcaps{ font-variant: small-caps; }
span.underline{ text-decoration: underline; }
q { quotes: "“" "”" "‘" "’"; }
div.column{ display: inline-block; vertical-align: top; width: 50%; }
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}

Still doesn't change the font. I've linked the stylesheets.

[Turtle91]

Did you use “@font-face”….

[aknight2015]

Still refuses to work. I've included the attached file to show what I'm dealing with.

[Foozle]

Your ../Fonts/ needs to be lowercase ../fonts/

[Turtle91]

so....you have set the html tag <code> to have the font...but you don't have any <code> tags in the epub you posted.

Your src reference needs to be the exact same as your epub...capitalization matters.... so, as Foozle mentioned, /fonts/ is not the same as /Fonts/. I used Sigil menu 'Tools/Restructure Epub to Sigil Norm" - although that isn't strictly necessary, it makes the structure and naming of the ePub something I can rely on - and am familiar with.

In this case, I cleaned up some of the duplicate css and moved the font to the header tags.

@font-face {
  font-family:'Chomsky'; 
  font-weight:normal; 
  font-style:normal; 
  src:url('../Fonts/Chomsky.otf')
}

body{margin:5%; text-align:justify; font-size:medium; background-color:#FCF5E5}

h1,h2,h3,h4,h5,h6{font-family:"Chomsky"; text-align:left}

nav#toc ol,nav#landmarks ol{padding:0; margin-left:1em}

nav#toc ol li,nav#landmarks ol li{list-style-type:none; margin:0; padding:0}

a.footnote-ref{vertical-align:super}

em{font-style:italic}

em em{font-style:normal}

code{white-space:pre-wrap}

span.smallcaps{font-variant:small-caps}

span.underline{text-decoration:underline}

q{quotes:"“" "”" "‘" "’"}

div.column{display:inline-block; vertical-align:top; width:50%}

div.hanging-indent{margin-left:1.5em; text-indent:-1.5em}

[Turtle91]

OBTW, your cover image was HUGE! It was 11MB!! I changed it to a jpg and reduced the size slightly...now it is only 230KB

[DNSB]

Looking at your CSS, where are you associating the font with the displayed text. The only item I see is associating it with <code> which would generally be used for a monospaced font. Perhaps adding a 'font-family: "ChomskyRegular";' to the body selector might help.

You also have an egregious error in your CSS where you have an stray } after the body selector. In several renderers, this will have your entire stylesheet unused.

body { margin: 5%; text-align: justify; font-size: medium; background-color: #FCF5E5; }
}

Please note that since you do not include an italic variant of the font, italics will either be faked or the selector will be disregarded.

There are several other errors.

You have an anchor in the nav.xhtml that has no content:

<li id="toc-li-1"><a href="text/ch001.xhtml#section"></a>

You are using center incorrectly. You could have a paragraph selector with text-align: center or add it as an inline style (blechhh...)

<center><p><em>For a more complete record, please see Great Crusade Chronology .</em></p></center>

Adding a .center selector in the stylesheet and replacing <center><p> with <p class="center"> and </p></center> with </p> would remove that error.

And, in my personal opinion, Chomsky is an ugly and unreadable font for body text. There's a reason that newpapers did not use that style of font in the body.

Anyhow, I've attached my corrected version of the epub to this message. Note that what I've done to it is strictly my personal choices other than correcting the errors that epubcheck popped up with.

I very strongly recommend that you install the Sigil's epubcheck plugin and make use of it.

[aknight2015]

I just want to say thank you for all your help. I'm going to download this thread for future reference.

[Doitsu]

Originally Posted by DNSB

And, in my personal opinion, Chomsky is an ugly and unreadable font for body text. There's a reason that newpapers did not use that style of font in the body.

For a futuristic look, the OP might want to consider using Eurostile instead. It's not ideal for body text either, but definitely more readable than Chomsky or other blackletter fonts. (Eurostile was used in lots of Scifi movies.)

Originally Posted by DNSB

I very strongly recommend that you install the Sigil's epubcheck plugin and make use of it.

Since EPUBCheck will only look for some CSS errors, the OP also might want to install my CSS Validator plugin or simply use Tools > Validate with W3C to check CSS files for errors. (The plugin uses an offline version of the W3C CSS validator.)

[DNSB]

Originally Posted by Doitsu

Since EPUBCheck will only look for some CSS errors, the OP also might want to install my CSS Validator plugin or simply use Tools > Validate with W3C to check CSS files for errors. (The plugin uses an offline version of the W3C CSS validator.)

I do use both your CSS validator and the online validator. As most people have noticed by now, I am too lazy to do what the computer can do better so I tend to make use of any tools that allow me to work smarter not harder.

I'm still trying to wrap my mind around what was being attempted with the em, em em em, em em em em em { trying to set italic while em em, em em em em {
were trying to set normal.

An attempt to toggle nested em tags between italic and normal?