You have to specify a @font-face rule for each face:
<html>
<head>
<style>
@font-face {
font-family: 'Palatino';
src: url('http://www.wizadjournal.com/pala.ttf') format('truetype');
}
@font-face {
font-family: 'Palatino';
src: url('http://www.wizadjournal.com/palai.ttf') format('truetype');
font-style: italic;
}
@font-face {
font-family: 'Palatino';
src: url('http://www.wizadjournal.com/palab.ttf') format('truetype');
font-weight: bold;
}
@font-face {
font-family: 'Palatino';
src: url('http://www.wizadjournal.com/palabi.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body style="font-family:Palatino">
Normal,
<strong>bold</strong>
<em>italic</em>
<strong><em>bold-italic</em></strong>
</body>
</html>