Where exactly does the @font-face code go?

[rush24t3]

Trying to get @font-face working on my Wordpress blog, but while there are myriad Google results on the code itself, what it does, etc., I cannot find where I'm supposed to paste it within my existing CSS.

Here's the code (via fontsquirrel.com)

@font-face {
font-family: 'ChunkFiveRegular';
src: url('Chunkfive-webfont.eot');
src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('Chunkfive-webfont.woff') format('woff'),
url('Chunkfive-webfont.ttf') format('truetype'),
url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;

I understand how to reference the font in the stylesheet, but the places I've pasted the specifc code either has no effect, or it breaks the template.

If this is a derp question, let me have it, guns blazing. TIA.

 

[Sgraffite]

I'm definitely not the best person to ask about CSS or Wordpress, but I see some semicolon separated and some comma separated going on there in your list.

Also you have multiple src and url, is that allowed? As well as an @ symbol at the front of your strange CSS, maybe that is a Wordpress thing?

 

[janelled]

I typically place it at the top of my style sheets, but I don't think it really matters too much.

If the code is verbatim from fontsquirrel that should be fine (disregard Sgraffite's comments), just make sure the paths to the font files are relative to the style sheet you'll be placing them in and that you've stacked the fonts correctly.

 

[CEpeep]

Consider using the Google Font API instead of @font-face. It's easier to implement and more widely supported. If you can't find a font you like in their catalog, you can use your own.