This is an archived forum post. The information may be outdated. Contact us if you have any questions.

Truetype Font issues

jlevitas16 wrote on 2013-02-28:

I have inserted this code into my program:
@font-face {
font-family: 'Palatino';
src: url('http://www.wizadjournal.com/palai.ttf') format('truetype');
}

and in the html:
<div style="font-face:Palatino">Text <strong>bold</strong></div>

The Palatino font works and is italic, but the bold text isn't bold.
There are 4 ttf's for this font - pala.ttf, palab.ttf, palai.ttf, palabi.ttf

How do I get all 4 to work within one paragraph of text?

support wrote on 2013-03-01:

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>