This is your CSS without all the rubbish that will work to subset the fonts. Also, you do not need two CSS. In fact, it's just really poor coding (IMHO) to use multiple CSS.
The modification I've made to your CSS makes your CSS much more compact and simple. Plus, it will wor in Calibre to subset your fonts. WHat you were doing before was not going to work in most programs/Readers. However you were coding your CSS, just don't do it because it's not going to work.
Code:
@font-face {
src: url(F01.ttf);
font-family: "Fiandra";
font-weight: bold;
font-style: normal;
}
@font-face {
src: url(F02.ttf);
font-family: "Waterly 10";
font-weight: bold;
font-style: italic;
}
div.question {
font-family: "Fiandra";
font-size: 90.5%;
}
div.answer {
font-family: "Waterly 10";
}