Am I using @font-face correctly?

phossler · 11-22-2012, 12:07 PM

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

theducks · 11-22-2012, 12:25 PM

Garmond is the font family
Then there is an @font for each stroke-weight combination that links the font source

Code:

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

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

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

The usage refers to the Family: 'Garmond'
the weight and style will then select which (matching) Family member to use (the weight and style values must match the @ font)

In your example, you just have 2 Familys

mrmikel · 11-22-2012, 02:20 PM

Just a reminder that Sigil will show up the basic font face, but won't show the variations such as italic. If correctly done, they will show up in the device.

For checking that, use Reader for PC or some other similar software for your device.

phossler · 11-22-2012, 09:33 PM

@theducks -- thanks -- that sorted it out for me as far as the epub version is concerned

I was trying to follow the tutorial:

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

which had an example

Quote:

Add a definition of the font, e.g.:

@font-face {
font-family: 'MyFont'; <===================???
font-weight: normal;
font-style: normal;
src: url(MyFont.ttf);
}

@font-face {
font-family: 'MyFontBold'; <=================???
font-weight: bold;
font-style: normal;
src: url(MyFontBold.ttf);
}

and I mis-understood that 'font-family' part

@mrducks -- thanks for the reminder, I use Adobe Digital Editions to check epubs and Kindle Previewer (not Kindle for PC) to see how well Calibre converted it to mobi or azw3

Thanks again

Paul

theducks · 11-22-2012, 09:51 PM

Quote:

Originally Posted by phossler

@theducks -- thanks -- that sorted it out for me as far as the epub version is concerned

I was trying to follow the tutorial:

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

which had an example

and I mis-understood that 'font-family' part

@mrducks -- thanks for the reminder, I use Adobe Digital Editions to check epubs and Kindle Previewer (not Kindle for PC) to see how well Calibre converted it to mobi or azw3

Thanks again

Paul

I believe that is in error (or it could be just a different way)
I like declaring a single family, then using the variations, knowing they will have the same look.
You would NOT declare Brush to be part of the Garmond, it has atotal different look.

My PEz (Adobe) is my check

phossler · 11-23-2012, 09:06 AM

Well, the 'theducks way' has the great advantage of working, and the 'different way' in the tutorial does not (at least the way I was doing it)

(The Brush ttf was easy to not mess up since there were no style or weight options) so only single font-family)

Then once I realized that I needed to 1) make a AZW3 file, AND 2) turn [Use Publisher Fonts] on in the Touch, everything works 100% as expected / wanted / hoped for

Paul

JSWolf · 11-28-2012, 04:58 PM

Just a quick note about Garamond...

It's too light for eink screens. When I've seen it used, I've replaced it with the semibold version. But the better solution is to find a better font that works with an eink screen. Also, another issue with Garamond is that the ration of lower case to upper case is not all that good so it leaves a lot of white space between the lines.

phossler · 11-29-2012, 03:54 PM

@JSWolf -- You're right about Garamond being a little too light (but it looks so pretty) .

The dead tree version of the book was in Garamond so I just carried along with it

The Touch doesn't have the contrast I'd like as it is

Are there 'standard' recommendations for highly readable fonts for the KT? I really prefer serif fonts for reading.

I'm just converting / fixing / reformatting PD books for personal reading, so the only person I have to please is myself.

Paul

JSWolf · 11-29-2012, 09:19 PM

I have a modified (made darker) version of Charis SIL that is very readable on an eink screen. Plus the height of the uppercase to lowercase is very good. Here's the link to download. Also, there are smallcap versions too.

http://www.mediafire.com/download.php?64cse2dshispx08

phossler · 11-29-2012, 09:50 PM

Thanks -- at first glance it seems like it'll will be very readable

I usually use Bookman as my workhorse font, but it's got eink issues also

Some of the books I'm Sigil-izing have sub and super scripts, and the Charis seems like it will help there also.

Paul

JSWolf · 11-29-2012, 09:53 PM

Quote:

Originally Posted by phossler

Thanks -- at first glance it seems like it'll will be very readable

I usually use Bookman as my workhorse font, but it's got eink issues also

Some of the books I'm Sigil-izing have sub and super scripts, and the Charis seems like it will help there also.

Paul

It is very readable. I've been using it for some time now and I like the way it displays.

Happy to help.

signum · 11-30-2012, 03:31 PM

I'm surprised this hasn't been mentioned in this thread yet. The original post shows four @font-face declarations. The first two look just fine. The fourth one uses backslashes in the “url” line instead of forward slashes. Forward slashes are preferred, but the backslashes might work the same anyway. I'd still change them to forward slashes.

The third declaration begins with a backslash as the first character of the url. Assuming that the backslash works the same as the forward slash, this will take you to the directory of all directories, the top level of the entire filesystem (aka disk). Remove that leading backslash and the declaration for “bold” will have a much better chance of working when you get around to testing it. Also change the backslashes to forward slashes while you're there.

phossler · 11-30-2012, 04:38 PM

@signum -- I did fix them in the CSS and you're right -- it did work much better.

I had a number of other issues with my CSS; some i found myself and other the people here helped me with

Paul

11-22-2012, 12:25 PM	#2
theducks Well trained by Cats Posts: 30,916 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Garmond is the font family Then there is an @font for each stroke-weight combination that links the font source Code: @font-face { font-family: 'Garamond'; font-weight: normal; font-style: normal; src: url('../Fonts/Garamond.ttf'); } @font-face { font-family: 'Garamond'; font-weight: bold; font-style: normal; src: url('\..\Fonts\Garamond Bold.ttf'); } @font-face { font-family: 'Garamond ; font-weight: normal; font-style: italic; src: url('..\Fonts\Garamond Italic.ttf'); } The usage refers to the Family: 'Garmond' the weight and style will then select which (matching) Family member to use (the weight and style values must match the @ font) In your example, you just have 2 Familys

11-29-2012, 09:19 PM	#9
JSWolf Resident Curmudgeon Posts: 79,256 Karma: 145488788 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	I have a modified (made darker) version of Charis SIL that is very readable on an eink screen. Plus the height of the uppercase to lowercase is very good. Here's the link to download. Also, there are smallcap versions too. http://www.mediafire.com/download.php?64cse2dshispx08 Last edited by JSWolf; 02-03-2013 at 06:16 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Gentium Book font (ttf) doesn't render correctly	therealjoeblow	Kobo Reader	13	06-21-2015 09:24 AM
A new face from New Zealand	PeterMNZ	Introduce Yourself	3	10-15-2012 02:28 AM
Just Another Pretty Face	PollyN	Introduce Yourself	6	01-08-2012 05:49 AM
Another new face in the crowd!	Rebos1969	Introduce Yourself	8	06-24-2010 08:01 PM

11-22-2012, 02:20 PM	#3
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	Just a reminder that Sigil will show up the basic font face, but won't show the variations such as italic. If correctly done, they will show up in the device. For checking that, use Reader for PC or some other similar software for your device.

11-23-2012, 09:06 AM	#6
phossler Wizard Posts: 1,087 Karma: 447222 Join Date: Jan 2009 Location: Valley Forge, PA, USA Device: Kindle Paperwhite	Well, the 'theducks way' has the great advantage of working, and the 'different way' in the tutorial does not (at least the way I was doing it) (The Brush ttf was easy to not mess up since there were no style or weight options) so only single font-family) Then once I realized that I needed to 1) make a AZW3 file, AND 2) turn [Use Publisher Fonts] on in the Touch, everything works 100% as expected / wanted / hoped for Paul

11-28-2012, 04:58 PM	#7
JSWolf Resident Curmudgeon Posts: 79,256 Karma: 145488788 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Just a quick note about Garamond... It's too light for eink screens. When I've seen it used, I've replaced it with the semibold version. But the better solution is to find a better font that works with an eink screen. Also, another issue with Garamond is that the ration of lower case to upper case is not all that good so it leaves a lot of white space between the lines.

11-29-2012, 03:54 PM	#8
phossler Wizard Posts: 1,087 Karma: 447222 Join Date: Jan 2009 Location: Valley Forge, PA, USA Device: Kindle Paperwhite	@JSWolf -- You're right about Garamond being a little too light (but it looks so pretty) . The dead tree version of the book was in Garamond so I just carried along with it The Touch doesn't have the contrast I'd like as it is Are there 'standard' recommendations for highly readable fonts for the KT? I really prefer serif fonts for reading. I'm just converting / fixing / reformatting PD books for personal reading, so the only person I have to please is myself. Paul

11-29-2012, 09:50 PM	#10
phossler Wizard Posts: 1,087 Karma: 447222 Join Date: Jan 2009 Location: Valley Forge, PA, USA Device: Kindle Paperwhite	Thanks -- at first glance it seems like it'll will be very readable I usually use Bookman as my workhorse font, but it's got eink issues also Some of the books I'm Sigil-izing have sub and super scripts, and the Charis seems like it will help there also. Paul

11-30-2012, 03:31 PM	#12
signum Zealot Posts: 119 Karma: 64428 Join Date: Aug 2011 Device: none	I'm surprised this hasn't been mentioned in this thread yet. The original post shows four @font-face declarations. The first two look just fine. The fourth one uses backslashes in the “url” line instead of forward slashes. Forward slashes are preferred, but the backslashes might work the same anyway. I'd still change them to forward slashes. The third declaration begins with a backslash as the first character of the url. Assuming that the backslash works the same as the forward slash, this will take you to the directory of all directories, the top level of the entire filesystem (aka disk). Remove that leading backslash and the declaration for “bold” will have a much better chance of working when you get around to testing it. Also change the backslashes to forward slashes while you're there.

11-30-2012, 04:38 PM	#13
phossler Wizard Posts: 1,087 Karma: 447222 Join Date: Jan 2009 Location: Valley Forge, PA, USA Device: Kindle Paperwhite	@signum -- I did fix them in the CSS and you're right -- it did work much better. I had a number of other issues with my CSS; some i found myself and other the people here helped me with Paul

Advert

Advert