View Full Version : font problems in ADE


iain robinson
06-20-2012, 12:15 PM
Hi all

I've made an ePUB file from Adobe Indesign which I have since done a fair amount of work to. It validates okay and displays as expected.

Now the customer wants us to try and use the fonts from the print edition in the ePUB. Fair enough, I know how, but I've got a problem. I have manually embedded one font (Open Sans, a Google Web Font) and the code I have added makes it display okay in Chrome and seems to display in ADE too. Trouble is, it displays as bold in ADE (it's a semi-bold font and displays as such in Chrome). I copied the "font-style: normal; font-weight: 600;" code from the GWF website - the 600 denotes the semi-bold variant.

The CSS code is as follows;

@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
src : url(fonts/OpenSans-Semibold.ttf);
}

p.A-head-article-title {
font-family: "Open Sans", sans-serif;
letter-spacing: -0.05em;
word-spacing: 0.06em;
font-size: 2em;
color: black;
-webkit-hyphens:none;
margin-top: 0em;
margin-bottom: 0.5em;
}


Anyone got any thoughts? I know the client will be previewing the files in ADE.

thanks,
Iain

JSWolf
06-20-2012, 12:25 PM
Hi all

I've made an ePUB file from Adobe Indesign which I have since done a fair amount of work to. It validates okay and displays as expected.

Now the customer wants us to try and use the fonts from the print edition in the ePUB. Fair enough, I know how, but I've got a problem. I have manually embedded one font (Open Sans, a Google Web Font) and the code I have added makes it display okay in Chrome and seems to display in ADE too. Trouble is, it displays as bold in ADE (it's a semi-bold font and displays as such in Chrome). I copied the "font-style: normal; font-weight: 600;" code from the GWF website - the 600 denotes the semi-bold variant.

The CSS code is as follows;

@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
src : url(fonts/OpenSans-Semibold.ttf);
}

p.A-head-article-title {
font-family: "Open Sans", sans-serif;
letter-spacing: -0.05em;
word-spacing: 0.06em;
font-size: 2em;
color: black;
-webkit-hyphens:none;
margin-top: 0em;
margin-bottom: 0.5em;
}


Anyone got any thoughts? I know the client will be previewing the files in ADE.

thanks,
Iain

Couple of things...First, the code needs fixing...


@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: normal;
src : url(fonts/OpenSans-Semibold.ttf)
}

p.A-head-article-title {
font-family: "Open Sans", sans-serif;
font-size: 2em;
color: black;
-webkit-hyphens:none;
margin-top: 0;
margin-bottom: .5em
}


What could be happening is that the semi-bold font is displaying correctly and it just a bit bolder then you expected. You cannot base anything on Chrome. That just doesn't count. Is this the only font you have embedded? Do you have a bold variety? If you do, then it could be an encoding issue. ADE can be picky about this. I've had this happen before where I've embedded a full font family and where normal should have been used, I got bold. Get a copy of Notepad++, load in all the files (CSS, OPF, ncx, XML) and make sure the encoding of every file is UTF-8 without BOM. Once that's done, put them all back in the ePub and try it again in ADE.

iain robinson
06-20-2012, 02:28 PM
Thanks for your reply JSWolf.

What exactly did you change in the code? I see you changed the font-weight to "normal" when I declared the font, rather than "600". As I said I copied that from the Google Web Fonts site (where the fonts came from) - I can't say I'd ever seen font weights expressed like that in CSS before but I assumed they knew best. I'll try it your way and see if it makes a difference.

I use Chrome as an alternative to ADE as it uses the webkit rendering engine the same as iBooks. I don't always have access to an iPad and I know the iPad will make-up a sizeable proportion of the audience for this title. You think it is not similar enough to be worthwhile?

The semi-bold is the only font I have embedded. I do have a bold variety but it is not embedded or referenced anywhere in the file.

In the opf file is the line <?xml version="1.0" encoding="UTF-8" standalone="yes"?>

I take it you are suggesting changing it to
<?xml version="1.0" encoding="UTF-8 without BOM" standalone="yes"?>
and then the same in the ncx file etc? I'm at home so can't do it at the moment - what is that doing exactly?

JSWolf
06-20-2012, 03:10 PM
Thanks for your reply JSWolf.

What exactly did you change in the code? I see you changed the font-weight to "normal" when I declared the font, rather than "600". As I said I copied that from the Google Web Fonts site (where the fonts came from) - I can't say I'd ever seen font weights expressed like that in CSS before but I assumed they knew best. I'll try it your way and see if it makes a difference.

I use Chrome as an alternative to ADE as it uses the webkit rendering engine the same as iBooks. I don't always have access to an iPad and I know the iPad will make-up a sizeable proportion of the audience for this title. You think it is not similar enough to be worthwhile?

The semi-bold is the only font I have embedded. I do have a bold variety but it is not embedded or referenced anywhere in the file.

[quote]In the opf file is the line <?xml version="1.0" encoding="UTF-8" standalone="yes"?>

I take it you are suggesting changing it to
<?xml version="1.0" encoding="UTF-8 without BOM" standalone="yes"?>
and then the same in the ncx file etc? I'm at home so can't do it at the moment - what is that doing exactly?

I'm suggesting you install Notepad++ and load every text file (OPF, CSS, XML, ncx) into Notepad++ and check the encoding. Notepad++ has an encoding menu that has nothing to do with the encoding that you are talking about. Notepad++ supports tabs, so you can load everything at once and close each tab as you finish.

As for the font, I can give it a go and see what happens with ADE. ADE does not support font-weight commands that specify an actual weight. I have no idea if iBooks would or not. But the way to do it is to have the different font styles for that font family that you will need. I will give that font a go in ADE and see how it looks. I can also try it in iBooks and Bluefire and see how they both look on an iPad.

JSWolf
06-20-2012, 03:24 PM
I've had a look in ADE and I used both the semibold and the bold versions to compare and the bold version does look thicker. But the semibold compared to the default ADE does look boldish and could be taken for bold. It's not a problem in ADE. It's just the way the font is.

iain robinson
06-20-2012, 03:25 PM
Okay, thanks. I'll have a look tomorrow.

iain robinson
06-21-2012, 05:44 AM
You're absolutely right - how the font displays in ADE is correct. I checked it in Adobe Indesign. Sigil and Chrome both display it incorrectly:smack:

That's fine - I'll just use regular then. It's a real pain in the ass not having actual devices to check these things on because the software's a nightmare.

Thanks again for your help. Just out of interest - if you made a test file, did it display as the same weight in iBooks?

Jellby
06-21-2012, 06:16 AM
The idea behind the @font-face declaration (which doesn't mean that's the way it works in actual renderers) is this:

1. You declare a font as "bold", "italic", whatever in the @font-face rule. It doesn't mean the font file has those properties, it just instructs the renderer to use the linked font file when the correponding font-family/font-weight/font-style/font-variant combination is requested.

2. You then have to use the font with the matching font-family/font-weight/font-style/font-variant combination.

So, if you declare a font as "font-weight: 600" in the @font-face, you have to use "font-weight: 600" in the style of the element you want the font applied to (either directly or as part of some other cascading/inherited styles).

iain robinson
06-21-2012, 08:32 AM
Ahh - that makes sense. Thanks Jellby.

JSWolf
06-21-2012, 03:32 PM
You're absolutely right - how the font displays in ADE is correct. I checked it in Adobe Indesign. Sigil and Chrome both display it incorrectly:smack:

That's fine - I'll just use regular then. It's a real pain in the ass not having actual devices to check these things on because the software's a nightmare.

Thanks again for your help. Just out of interest - if you made a test file, did it display as the same weight in iBooks?

I've not yet tested it in iBooks. I'll do so tonight and report back.

JSWolf
06-22-2012, 04:49 PM
I've put the eBook on the iPad in both iBooks and Bluefire and they look the same as far as that font family goes. The semi-bold does not look as bold as it does under ADE for Windows. But the bold also looks less bold as well.

I would not worry. Everything is OK as far as I can see on ADE for Windows and iBooks & Bluefire for the iPad.

iain robinson
06-25-2012, 02:53 AM
That's reassuring to know. Thanks for checking for me.

cheers