CSS font error in Calibe

[WV-Mike]

-- CSS font error in Calibe --

Greetings,
I validated again and I still get the same error in Calibre.
The font displays as expected yet I keep getting the font related error, but only in Calibre.
Can anyone shed any light on this?
Thanks,
WV-Mike

====
Pagina:
Validating using EPUB version 2.0.1 rules.
(https://github.com/w3c/epubcheck)
September 18, 2023 6:20:38 AM EDT
No errors or warnings detected. EPUB is valid!

=====
https://www.ebookit.com/tools/bp/Bo/...epub-validator
No errors reported

=====
Calbre
OEBPS/Styles/mnc_toc.css
The font family name specified in the CSS @font-face rule: "Fontin-SmallCaps" does not match the font name inside the actual font file: "Fontin SmallCaps". This can cause problems in some viewers. You should change the CSS font name to match the actual font name.
Change the font name Fontin-SmallCaps to Fontin SmallCaps everywhere
====

Here is the font file:
C:\Users\defaultuser0.LAPTOP-5UQ4L9LI.000\AppData\Local\sigil-ebook\sigil\workspace\Sigil-mEHozG\OEBPS\Fonts\Fontin-SmallCaps.otf

Here is the CSS:
h1 {
font-family: "Fontin-SmallCaps", sans-serif;
font-size: 1.3em;
font-weight: bold;
text-align: center;
margin-top: 0;
}
@font-face {
font-family: "Fontin-SmallCaps";
font-weight: bold;
font-style: normal;
font-variant: small-caps;
src: url(../Fonts/Fontin-SmallCaps.otf);
}

[JSWolf]

Drop the font-variant in the @font-face. That's incorrect.

[WV-Mike]

Originally Posted by JSWolf

Drop the font-variant in the @font-face. That's incorrect.

I dropped the font-variant in the @font-face and Calibre still returns the same validation error.

Thanks,
WV-Mike

[Turtle91]

JSWolf is correct. Font-variant does not go in the @font-face declaration it goes in the css for the style you wish to apply.

Example from your code:

h1 {
font-family: "Fontin-SmallCaps", sans-serif;
font-variant: small-caps;
font-size: 1.3em;
font-weight: bold;
text-align: center;
margin-top: 0;
}
@font-face {
font-family: "Fontin-SmallCaps";
font-weight: bold;
font-style: normal;
src: url(../Fonts/Fontin-SmallCaps.otf);
}

Here is a good reference for @font-face.

As for the Calibre warning… just read what it says. Your font name declaration is not the same as the internal name IN the font. You may have problems. It tells you to change the font name to match.

Calbre
OEBPS/Styles/mnc_toc.css
The font family name specified in the CSS @font-face rule: "Fontin-SmallCaps" does not match the font name inside the actual font file: "Fontin SmallCaps". This can cause problems in some viewers. You should change the CSS font name to match the actual font name.
Change the font name Fontin-SmallCaps to Fontin SmallCaps everywhere

i.e. remove the dash in the font name reference.
font-family: "Fontin SmallCaps";

[WV-Mike]

Originally Posted by Turtle91

J

As for the Calibre warning… just read what it says. Your font name declaration is not the same as the internal name IN the font. You may have problems. It tells you to change the font name to match.

i.e. remove the dash in the font name reference.
font-family: "Fontin SmallCaps";

I don't understand. The name of the font has a dash in it. So why remove the dash in the font name reference?
src: url(../Fonts/Fontin-SmallCaps.otf);
h1 {
font-family: "Fontin-SmallCaps", sans-serif;

Thanks,
WV-Mike

[JSWolf]

Originally Posted by Turtle91

JSWolf is correct. Font-variant does not go in the @font-face declaration it goes in the css for the style you wish to apply.

font-variant: small-caps; goes nowhere in the CSS as the font being used is a smallcap font.

[jhowell]

Originally Posted by WV-Mike

I don't understand. The name of the font has a dash in it. So why remove the dash in the font name reference?
src: url(../Fonts/Fontin-SmallCaps.otf);
h1 {
font-family: "Fontin-SmallCaps", sans-serif;

Thanks,
WV-Mike

The file name (src url) is not the same as the actual name of the font. In your case the file name is "Fontin-SmallCaps.otf", but it could be anything you want. The actual name of the font as encoded within the file is "Fontin SmallCaps".

[Turtle91]

Originally Posted by WV-Mike

I don't understand. The name of the font has a dash in it. So why remove the dash in the font name reference?
src: url(../Fonts/Fontin-SmallCaps.otf);
h1 {
font-family: "Fontin-SmallCaps"

Thanks,
WV-Mike

There is an internal name built in to the font (like metadata) that does not match the name you gave it in the font-face declaration.

filename: "Fontin-SmallCaps.otf"
internal metadata name: "Fontin SmallCaps"
@font-face declaration: "Fontin-SmallCaps"


Filename doesn't matter. What matters is the font-face declaration does not match the internal metadata name. This MAY cause an issue on SOME readers. To be safe though it is better to make them the same by changing the declaration and any references to match the internal name:

font-family: "Fontin SmallCaps", sans-serif;

[Turtle91]

Originally Posted by JSWolf

font-variant: small-caps; goes nowhere in the CSS as the font being used is a smallcap font.

Jon, you missed the point. I was telling him (and anyone else who may be interested) why there was an error, and how it is supposed to be done in general. It doesn't really matter what font is being used.

Besides, it doesn't really matter if you use the font-variant:small-caps style on a font that is a small-caps font...it doesn't change anything, and it doesn't throw an error.

[JSWolf]

Originally Posted by Turtle91

Jon, you missed the point. I was telling him (and anyone else who may be interested) why there was an error, and how it is supposed to be done in general. It doesn't really matter what font is being used.

Besides, it doesn't really matter if you use the font-variant:small-caps style on a font that is a small-caps font...it doesn't change anything, and it doesn't throw an error.

I don't know if the font being used would display correctly or not if you specified small-caps. But it displays correctly without. The way you explained it made it sound like it should be used in that case.

[Turtle91]

No, I said:

Font-variant does not go in the @font-face declaration it goes in the css for the style you wish to apply.
...
Here is a good reference for @font-face.

As far as displaying properly, try it...

It is the same philosophy as putting an <i> or <em> tag in an area that is using an italics font...not necessary, but it doesn't hurt. And, if you decide to change the font at some point it still displays as italic.

[WV-Mike]

Originally Posted by jhowell

The file name (src url) is not the same as the actual name of the font. In your case the file name is "Fontin-SmallCaps.otf", but it could be anything you want. The actual name of the font as encoded within the file is "Fontin SmallCaps".

Ok. Interesting if confusing conversation for me.

I still don't get why the font names (Fontin-SmallCaps.otf/Fontin SmallCaps) don't have to match. I will have to cogitate on that.
I know it was explained to me but that doesn't mean I understand stand it.
The story of my life...

Regardless, I made the changes and there is no long an error in Calibe.

Thanks to all for their time and patience.
WV-Mike

[nabsltd]

Originally Posted by WV-Mike

I still don't get why the font names (Fontin-SmallCaps.otf/Fontin SmallCaps) don't have to match. I will have to cogitate on that.

"Fontin-SmallCaps.otf" is a filename, not a font name. The fact that the file contains font data is not important. You can rename the file to whatever you want, and it will still contain font data.

"Fontin SmallCaps" is a name of the font in the font data inside the file. It does not have to match the filename, or anything else. There is more than one font name inside the font file, because of historical reasons (Apple had their own way of naming fonts, so one of the extra names is there for compatibility with older MacOS versions). It is rare for all the font names in the font file to match each other, and your EPUB checker is only talking about one of them, so it's wrong from the start.

There is also a font name that you specify in the @font-face declaration:

font-family: "Fontin SmallCaps";

What you put in this declaration is what you use in a later CSS declaration block to refer to it:

.myclass {
font-family: "Fontin SmallCaps";
}

Despite the warning you got with the checking application, the only thing that matters is that the value of the font-family property in both the @font-face declaration and in later declarations match.

The @font-face declaration is used to tell the renderer about the characteristics of the font in the file. That declaration is the final arbiter, and does not have to reflect what is actually in the font file. The renderer will believe whatever you put in the declaration. So, if you declare the font to be "Fontin-SmallCaps" and always refer to it that way, it will work, regardless of what is in the font file.

[WV-Mike]

Originally Posted by nabsltd

"Fontin-SmallCaps.otf" is a filename, not a font name. The fact that the file contains font data is not important. You can rename the file to whatever you want, and it will still contain font data. ...

Thank you for your detailed explanation and taking the time to compose it.
This a new realm for me and the rules seem different than what I am used to.

WV-Mike

[Karellen]

I've come across this error a few times also. Sometimes I have ignored it, other times I have modified the metadata of the font file.

I am no expert on fonts, but as far as I can tell, if you check the internal metadata of the font file using something like FontForge or similar, you can check the internal naming.

I am not really sure which field is used, but looks like "Name for Humans" is the correct font name. Maybe one of the guru's could confirm?

But for this particular font, it seems to be full of errors according to the warnings in FontForge

-Edit-
I gave up on using smallcaps fonts. Instead I use, when necessary, fake smallcaps...

PHP Code:

.smallcaps {
  font-size: 0.8em;
  text-transform: uppercase;
} 


I have noticed that the Libra2 does not respect the text-transform: uppercase anymore. Something changed in one of their updates.