Log in

View Full Version : Embedding font variants?



gwmbox
03-30-2010, 06:51 AM
Hi guys

Just wondering is it possible to embed font variants, as in the regular, bold and italic variants.

I ask as I have a site in development that is using Trebuchet MS as the default font (Arial/Helvetica as backups) and it works fine where the text is not in bold or in italics, but if there is bold and italics the font gets those parameters applied to the regular font instead of using the correct ttf font for those variants.i.e. it uses the standard regular ttf file (trebuc.ttf) rather than using the bold (trebucbd.ttf) and italic (trebuc.it.ttf) ttf files (and eot's for IE)

So for example I have as standard


@font-face {font-family: Trebuchet MS; src: url("/fonts/trebuc.eot") } /* EOT file for IE */
@font-face {font-family: Trebuchet MS; src: url("/fonts/trebuc.ttf") } /* TTF file for CSS3 browsers */
* {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; margin:0; padding:0;}

but how would I add the
trebucbd.ttf and trebucit.ttf (and the eot versions)?

If I just add them as

@font-face {font-family: Trebuchet MS; src: url("/fonts/trebucbd.ttf") }

the browser will use the last font listed only, so if this is after the first two then all is using the bold font variant.

Hope I make sense

Cheers

djr33
03-30-2010, 05:32 PM
You could always avoid the problem and simply have two different css declarations for the two types of font: define for <strong> and <p> differently, or whatever tags you may be using.
Sorry this doesn't answer your question, but I'm not sure if there is an approach that would work directly to solve that.