You need different versions of a font for different platforms. So there’s a lot more code and a few fonts needed to make this work. You can download the necessary font formats and code from here:
In reference to your specific code (from my limited knowledge of the @font-face (which is actually not CSS3))…
When defining the font-family in the div with class “pic”, you don’t need the ‘.otf’.
It should look like:
.pic
{
font-family:Chunkfive;
}
That should make it work.
As Ralph said, you need to define it for multiple web browser supports.
I know that Google Web Fonts (the resource that I use) and, now, Font Squirrel are both excellent for automatically providing the code for you so you don’t have to worry about .otf, .ttf, .eot, .woff. and .svg.
~TehYoyo
Note:
It’s cool to see someone who formats their css the same way I do
It’s normally frowned upon as the web standard is to format as such:
No, you upload the fonts that they supply to your own site, and then link to them in your CSS file. Simply modify the code I posted above to point to the location of the font files. If you place the fonts in the same folder as your CSS file, you can leave the links untouched. Just upload the fonts, add the above CSS to your CSS file, and then call the font by the font name on any element that needs that font, as TehYoyo said.
The webfont stuff has been worked out as the most reliable way to get @font-face working in the current environment. Designing for one browser only is not much use in general, but you can do it.