MobileRead Forums - View Single Post

Turtle91 · 02-26-2013, 04:45 PM

Step 1:
Make sure ALL the special fonts you are using are embedded by adding the file in the Fonts folder. Click "add existing files", point at the file and Sigil will put it in the correct place.

Step 2:
Place a font face declaration in your stylesheet (in your case "stylesheet.css") for EACH different font you wish to embed. It should look like this

Quote:

@font-face {font-family: yourFont; src: url('../Fonts/yourfontfile.ttf');}

Step 3:
You need to change the bold areas to correspond to your particular font.
Notice the full path required in the url "..Fonts/" before the filename...that is important.

Quote:

Replace:
yourFont with the name you want to use for your font
yourfontfile.ttf with the filename of your special font (.ttf/.otf, or .eot -for IE)

In the epub you showed us the filename is: "BradhITC.TTF" and the name you gave it:"Bradley Hand ITC"
You will need to do this for EACH font you want to embed.

Step 4:
Define a class to use the font you declared with the Font Face. This also goes in your stylesheet.

Quote:

.specialfont {font-family:yourFont, cursive}

Again replacing:
specialfont with a different class name for each font (specfont1, specfont2, etc.) It's better to be descriptive so you can remember which font does what. (no spaces)
yourFont with the name you called the font in your font face declaration.
cursive with whatever fallback font you want to use if the reader doesn't have or support your embedded font.

Make sure you surround the font names with quotes if it has any spaces in it.

Step 5:
You need to tag the text you wish to use so that the browser knows you want to use a special font on it. You do this by giving it the CLASS that you designated in your stylesheet (step 4).

Quote:

Step 6:
As JSWolf noted, your code is awfully messy - a lot of extraneous markups and stuff that doesn't need to be in there. That is normal to see when you have automatic conversion (like Calibre) of a document (like Word).
It is not REQUIRED to clean it up, but not cleaning it makes it much more difficult to determine exactly what is being done to your text and how to change it.

Here is an example of clean code from your first page (step5.html) compare it to what you have and you will see a big difference. Realize that there are many different ways of doing this, this is just a quick example.

Spoiler:

I hope that helps you out!

[edit:] I put the style definitions in the head of this document so you could see them - all the stuff between the <style></style> tags. Normally you put that in your stylesheet -without the <style></style> tags.