embedded fonts in epub

serendipity22 · 08-21-2018, 01:41 AM

Hi,

I am using Sigil to convert html + css files to epub to create ebooks. I have found it quick and easy to use.

I want to use a public domain chess font to present chess diagrams, so switching to another font will not do. I am struggling.

In my css file I have

@font-face {

font-family: 'merida';

font-weight: normal;

font-style: normal;

src: url(“MERIFONT.TTF”);

}

.diagram{
font-family: ''merida";
font-size: 48px;
}

In my html file I have say
<html xmlns='http://www.w3.org/1999/xhtml'>
<html>
<head>
<title>chess</title>
<link rel='stylesheet' type='text/css' href='merida.css'>
</head>
<body>

XABCDEFGHY 
8-+-wqk+-+( 
7+-+-+-+-' 
6-+-+-+-+& 
5+-+-+-+-% 
4-+-+-+-+$ 
3+-+-+-+-# 
2-+-+-+-+" 
1+-+QmK-+-! 
abcdefgh
testing
</body></html>

What am I doing wrong?

I had it working but forget what I did.

Also when it was working in sigil it would not work in adobe epub reader.

Toxaris · 08-21-2018, 03:15 AM

If it wasn't working in the Adobe reader, something is probably wrong in your stylesheet. A missing semicolon for example.

Now, when you upload your font to Sigil (you have done that I assume), it will be placed in the directory Fonts and you need to adjust your code accordingly. I would also strongly advise to not use px in your stylesheet. That would not scale right if someone would change the font size.

So, I would make it like this:

Code:

@font-face {
font-family: 'merida';
font-weight: normal;
font-style: normal;
src: url(“./Fonts/MERIFONT.TTF”);
}

.diagram{
font-family: ''merida";
font-size: 1em;
font-weight: normal;
font-style: normal;
}

I have also added the font weight and style to it. The reason is simple, if this was set to something else in the parent, it will inherit it otherwise and the font will not work.

Personally I would also display it different in the HTML and prevent usage of , but that is not required. Just a different style.

serendipity22 · 08-21-2018, 10:05 AM

Thank you for your prompt reply.

You have already clarified a couple of points for me.
One being the url line in the font-family block.

Quote:

Now, when you upload your font to Sigil (you have done that I assume)

I right-clicked on Fonts and added the font. Is that correct?

I would look at it some more in the morning when I am fresher.

DiapDealer · 08-21-2018, 10:58 AM

Keep in mind that there are some fonts that are simply incompatible with ADE. I con't remember the exact name of the property, offhand. But there was a certain version-level that determined whether ADE would support it. It was a property that could be easily modified in FontForge (or something similar). If your font is opensource, it should be possible. Someone else will have to provide the details, though.

But none of that will matter until you get it working in Sigil.

The only things I can recommend are using the Tools->Validate Stylesheets feature of Sigil to ensure there are no syntax errors (as Toxaris mentioned) and to double-check that the CSS is indeed linked to the html file.

Toxaris · 08-21-2018, 12:45 PM

Another forum member also mentioned to me there is another issue with the code. You used two single quotes and curly quotes instead of straight quotes (I made the changes red). It should be like this:

Code:

@font-face {
font-family: 'merida';
font-weight: normal;
font-style: normal;
src: url("./Fonts/MERIFONT.TTF");
}

.diagram{
font-family: 'merida';
font-size: 1em;
font-weight: normal;
font-style: normal;
}

Toxaris · 08-21-2018, 12:47 PM

Quote:

Originally Posted by DiapDealer

Keep in mind that there are some fonts that are simply incompatible with ADE. I con't remember the exact name of the property, offhand. But there was a certain version-level that determined whether ADE would support it. It was a property that could be easily modified in FontForge (or something similar). If your font is opensource, it should be possible. Someone else will have to provide the details, though.

Yup, you mean the OS/2 version number. It should be 3. Auto might work, but not always. That is one of the reason my FontShrinker program always sets the version to 3.

DiapDealer · 08-21-2018, 01:54 PM

Quote:

Originally Posted by Toxaris

Yup, you mean the OS/2 version number. It should be 3. Auto might work, but not always. That is one of the reason my FontShrinker program always sets the version to 3.

That's it. Thanks! I was thinking NTFS for some reason. I knew that wasn't it, but I couldn't shake it.

I don't know why I have such a hard time remembering "Defunct Windows/IBM OS."

RbnJrg · 08-21-2018, 02:06 PM

Quote:

Originally Posted by Toxaris

Another forum member also mentioned to me there is another issue with the code. You used two single quotes and curly quotes instead of straight quotes (I made the changes red). It should be like this:

Code:

@font-face {
font-family: 'merida';
font-weight: normal;
font-style: normal;
src: url("./Fonts/MERIFONT.TTF");
}

.diagram{
font-family: 'merida';
font-size: 1em;
font-weight: normal;
font-style: normal;
}

Your code is right, except that the property "src" need ".." instead one ("."). I think that is a "typo"

The correct sintax is:

Code:

src: url("../Fonts/MERIFONT.TTF");

By the way, "Merida" doesn't work fine under Sigil and ADE. You'll need "to fix" that font or to use another one. I could use "Case" without troubles:

Click image for larger version

Name: Image1.png
Views: 441
Size: 119.7 KB
ID: 165770

Below you can check the respective epub. By the way, to me is a good idea to use "px" or "pt" for the font-size IN THIS CASE. The diagram won't resize but will asure always is displayed fine, even with a big font-size.

Regards
Rubén

serendipity22 · 08-22-2018, 12:02 AM

Quote:

Originally Posted by Toxaris

Another forum member also mentioned to me there is another issue with the code. You used two single quotes and curly quotes instead of straight quotes (I made the changes red). It should be like this:

Code:

@font-face {
font-family: 'merida';
font-weight: normal;
font-style: normal;
src: url("./Fonts/MERIFONT.TTF");
}

.diagram{
font-family: 'merida';
font-size: 1em;
font-weight: normal;
font-style: normal;
}

Good point. I was confused when to use single and double quotes.

I have Merida working in html and sigil with the help of forum members
, but not in ADE.

I will keep reading.

serendipity22 · 08-22-2018, 12:47 AM

This will be fantastic help. I will use it for my diagrams right away.

serendipity22 · 08-22-2018, 09:46 PM

I add the case chess font to some chess ebooks I created. They worked in fine in Sigil and ADE. I then uploaded the epubs to Draft2Digital, downloaded and checked the epubs. They were fine.

Kobo is the only seller, whose online previewer can find the fonts (though I don't know about Apple, I cannot check those).

Why cannot these onliner e-readers find the embedded Case font?

I am not out of the woods yet.

Toxaris · 08-23-2018, 08:17 AM

Which online e-readers? Some readers just don't support embedded fonts and/or stylesheets.

serendipity22 · 08-23-2018, 10:44 PM

Quote:

Originally Posted by Toxaris

Which online e-readers? Some readers just don't support embedded fonts and/or stylesheets.

Fonts don't show on Amazon, Scribd and Barnes&Noble. Cannot test Apple or Tolino.

They show on Kobo.

Toxaris · 08-24-2018, 06:35 AM

Quote:

Originally Posted by serendipity22

Fonts don't show on Amazon, Scribd and Barnes&Noble. Cannot test Apple or Tolino.

They show on Kobo.

I am not sure, but I believe fonts are not possible on Mobi, but or possible on KF8. This will either be confirmed or set straight rather quickly I think. I never work with Kindle. No idea about Scribd or B&O.

Over here (Europe) it is mostly Kobo and Kindle. The others (Tolino/Pocketbook) are very small players. Even so, I would not be too concerned. If it is a valid ePUB and even ADE 2 shows it correctly, it is not the issue of the ePUB, but the reader. Embedded fonts can be quite a challenge sometimes.

Doitsu · 08-24-2018, 07:58 AM

@serendipity22: IMHO, using embedded fonts to display chess diagrams is a bad idea, because many users disable publisher fonts or use older apps that don't support embedded fonts.

You might want to consider generating chess diagrams with one of the many free apps for making chess diagrams.

If you're familiar with Python, you could also use python-chess to generate chess diagrams.

08-21-2018, 01:41 AM	#1
serendipity22 Member Posts: 14 Karma: 10 Join Date: Aug 2018 Device: none	embedded fonts in epub Hi, I am using Sigil to convert html + css files to epub to create ebooks. I have found it quick and easy to use. I want to use a public domain chess font to present chess diagrams, so switching to another font will not do. I am struggling. In my css file I have @font-face { font-family: 'merida'; font-weight: normal; font-style: normal; src: url(“MERIFONT.TTF”); } .diagram{ font-family: ''merida"; font-size: 48px; } In my html file I have say <html xmlns='http://www.w3.org/1999/xhtml'> <html> <head> <title>chess</title> <link rel='stylesheet' type='text/css' href='merida.css'> </head> <body> <p class = 'diagram'> XABCDEFGHY<br> 8-+-wqk+-+(<br> 7+-+-+-+-'<br> 6-+-+-+-+&<br> 5+-+-+-+-%<br> 4-+-+-+-+$<br> 3+-+-+-+-#<br> 2-+-+-+-+"<br> 1+-+QmK-+-!<br> abcdefgh</p> testing </body></html> What am I doing wrong? I had it working but forget what I did. Also when it was working in sigil it would not work in adobe epub reader.

08-21-2018, 03:15 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	If it wasn't working in the Adobe reader, something is probably wrong in your stylesheet. A missing semicolon for example. Now, when you upload your font to Sigil (you have done that I assume), it will be placed in the directory Fonts and you need to adjust your code accordingly. I would also strongly advise to not use px in your stylesheet. That would not scale right if someone would change the font size. So, I would make it like this: Code: @font-face { font-family: 'merida'; font-weight: normal; font-style: normal; src: url(“./Fonts/MERIFONT.TTF”); } .diagram{ font-family: ''merida"; font-size: 1em; font-weight: normal; font-style: normal; } I have also added the font weight and style to it. The reason is simple, if this was set to something else in the parent, it will inherit it otherwise and the font will not work. Personally I would also display it different in the HTML and prevent usage of <br>, but that is not required. Just a different style.

08-21-2018, 12:45 PM	#5
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Another forum member also mentioned to me there is another issue with the code. You used two single quotes and curly quotes instead of straight quotes (I made the changes red). It should be like this: Code: @font-face { font-family: 'merida'; font-weight: normal; font-style: normal; src: url("./Fonts/MERIFONT.TTF"); } .diagram{ font-family: 'merida'; font-size: 1em; font-weight: normal; font-style: normal; }

08-22-2018, 09:46 PM	#11
serendipity22 Member Posts: 14 Karma: 10 Join Date: Aug 2018 Device: none	online reader cannot find font I add the case chess font to some chess ebooks I created. They worked in fine in Sigil and ADE. I then uploaded the epubs to Draft2Digital, downloaded and checked the epubs. They were fine. Kobo is the only seller, whose online previewer can find the fonts (though I don't know about Apple, I cannot check those). Why cannot these onliner e-readers find the embedded Case font? I am not out of the woods yet.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Embedded fonts in epub	Jellby	Kobo Reader	8	07-25-2014 01:24 AM
Fonts not being embedded (epub)	soundsfromsound	Calibre	19	10-04-2013 01:31 PM
Embedded fonts in epub	erik5000	ePub	7	12-08-2009 11:55 AM
ePub embedded fonts	JSWolf	Ectaco jetBook	9	09-14-2009 08:43 PM
ePub + Embedded Fonts	Cygfrydd	ePub	11	03-02-2009 05:56 PM

08-21-2018, 10:58 AM	#4
DiapDealer Grand Sorcerer Posts: 28,341 Karma: 203719142 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Keep in mind that there are some fonts that are simply incompatible with ADE. I con't remember the exact name of the property, offhand. But there was a certain version-level that determined whether ADE would support it. It was a property that could be easily modified in FontForge (or something similar). If your font is opensource, it should be possible. Someone else will have to provide the details, though. But none of that will matter until you get it working in Sigil. The only things I can recommend are using the Tools->Validate Stylesheets feature of Sigil to ensure there are no syntax errors (as Toxaris mentioned) and to double-check that the CSS is indeed linked to the html file.

08-22-2018, 12:47 AM	#10
serendipity22 Member Posts: 14 Karma: 10 Join Date: Aug 2018 Device: none	This will be fantastic help. I will use it for my diagrams right away.

08-23-2018, 08:17 AM	#12
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Which online e-readers? Some readers just don't support embedded fonts and/or stylesheets.

08-24-2018, 07:58 AM	#15
Doitsu Grand Sorcerer Posts: 5,680 Karma: 23983815 Join Date: Dec 2010 Device: Kindle PW2	@serendipity22: IMHO, using embedded fonts to display chess diagrams is a bad idea, because many users disable publisher fonts or use older apps that don't support embedded fonts. You might want to consider generating chess diagrams with one of the many free apps for making chess diagrams. If you're familiar with Python, you could also use python-chess to generate chess diagrams.

Advert

Advert