View Single Post
Old 11-22-2012, 12:07 PM   #1
phossler
Wizard
phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.phossler ought to be getting tired of karma fortunes by now.
 
Posts: 1,071
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
Am I using @font-face correctly?

I'm not getting the formatting I was expecting


Using this HTML

Code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="../Styles/Garamond.css" rel="stylesheet" type="text/css" />
  <link href="../Styles/epub.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <p>none text text text text text text text text</p>

  <p class="brush">brush text text text text text</p>

  <p class="fancy">fancy no tags text text<br /></p>

  <p class="fancy"><i>fancy w/ i tag text text</i></p>

  <p class="fancyi">fancyi text text</p>
</body>
</html>


and this CSS

Code:
@font-face {
    font-family: 'Script';
    font-weight: normal;
    font-style: normal;
    src: url('../Fonts/Brush Script MT Italic.ttf');
}
@font-face {
    font-family: 'Garamond';
    font-weight: normal;
    font-style: normal;
    src: url('../Fonts/Garamond.ttf');
}

@font-face {
    font-family: 'Garamond Bold';
    font-weight: bold;
    font-style: normal;
    src: url('\..\Fonts\Garamond Bold.ttf');
}

@font-face {
    font-family: 'Garamond Italic';
    font-weight: normal;
    font-style: italic;
    src: url('..\Fonts\Garamond Italic.ttf');
}

p.fancy {
	font-family:'Garamond',serif;
	font-size: 4em;
}

p.fancyi {
	font-family:'Garamond Italic',serif;
	font-size: 4em;
}

p.brush {
	font-family:'Script',serif;
	font-size: 4em;
}
1. the class="fancyi" seems to display in Arial in Sigil and un-italic in ADE

2. to get the italic, I had to use <i> tags

Screen shots attached


Is this the way CSS / Sigil / epubs / ADE are supposed to work?

I feel I'm doing some wrong.

I thought I was following

http://web.sigil.googlecode.com/git/...bed_fonts.html

Thanks

Paul
Attached Thumbnails
Click image for larger version

Name:	Displayed in Sigil.JPG
Views:	419
Size:	70.6 KB
ID:	96647   Click image for larger version

Name:	Displayed in ADE.JPG
Views:	586
Size:	49.0 KB
ID:	96648  
Attached Files
File Type: epub test font.epub (420.3 KB, 205 views)
phossler is offline   Reply With Quote