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:
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.
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: