Custom font on specific pages-have code need to know where in css file to implement

Alright so I have several custom fonts I would like to use on the website because I hate the basic ones. I know that if I insert the below code into the CSS file I can then use my custom font: (using cool font as an example)

@font-face {
  font-family: cool_font;
  src: url('cool_font.ttf');
}

Once that's implemented I only have to insert the code as normal as shown below to make it implemented into the section.

{
  font-family: cool_font; /* no .ttf */
}

What I am wondering, is were in the style.css sheet for my theme is the smartest place to put the first bit of code??

Any help is appreciated.

bkindustries wrote:

Hi,

You can use the above code, but remember IE does not support .ttf files. There is a work around which can be found here: http://msdn.microsoft.com/en-us/library/ms533034%28VS.85%29.aspx

You need to covert to EOT file to use aswell as .ttf file.

It will look like:

@font-face {
    font-family: Garamond;
    font-weight: normal;
    src: url(Garamond1.eot);
    src: local(Garamond), url('Garamond1.ttf') format('opentype'); }

Search google for .ttf to eot files.

As where to Insert in stylesheet, just use the body tag like so:

body
{
  font-family: Garamond, verdana, helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  background: #444 url(images/bg_body.gif) repeat-x;
  color: #ff9933;
}

Hope this helps, mike..

Perfect, I did know about the work around for IE (just failed to put that in there) Just wasn't sure where to put it, Body tag works perfect though. Thanks Mike