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:
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.
Quote:
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";