I'm making an ePub using the Vollkorn font, and I wound up deciding to use the semi-bold version instead of the bold version for my <strong> text, so I made my @font-face declarations as usual.
Code:
@font-face {
src: url(../Vollkorn-Regular.ttf);
font-family: "Vollkorn";
font-weight: normal;
font-style: normal;
font-stretch: normal;
}
@font-face {
src: url(../Vollkorn-Italic.ttf);
font-family: "Vollkorn";
font-weight: normal;
font-style: italic;
font-stretch: normal;
}
@font-face {
src: url(../Vollkorn-SemiBold.ttf);
font-family: "Vollkorn";
font-weight: bold;
font-style: normal;
font-stretch: normal;
}
@font-face {
src: url(../Vollkorn-SemiBoldItalic.ttf);
font-family: "Vollkorn";
font-weight: bold;
font-style: italic;
font-stretch: normal;
}
However, Calibre is throwing up an error because the proper font-family name for the semi-bold fonts is "Vollkorn Semi-Bold".
This is probably a very minor problem but I do want to get it cleared up.
What's the best practices way to declare all these fonts and tell the <body> to use them to get rid of the error?