Multiple font-face in external css
===

I know that it's possible to have [multiple font-faces][1] on css.
Now I have two html pages that use these fonts but in the future there'll be more. Now those font-faces are declared via inline css and used via classes:

    <head>
    <style>
    @font-face {
    		font-family: 'Komika';
    		src: url('/bin/res/font/KOMIKAX_-webfont.eot');
    		src: url('/bin/res/font/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
    		url('/bin/res/font/KOMIKAX_-webfont.woff') format('woff'),
    		url('/bin/res/font/KOMIKAX_-webfont.ttf') format('truetype'),
    		url('/bin/res/font/KOMIKAX_-webfont.svg#KomikaAxisRegular') format('svg');
    		font-weight: normal;
    		font-style: normal;
    }
    .komika-font {font: 'Komika', Tahoma, sans-serif;}
    </style>
    </head>

What I really wanted was to wrap up all my font-faces into a single fonts.css and then on each individual html pages reference that css and use `<p class="...-font"><p>`

Is it possible? Because I tried it and it didn't work (the chosen font wasn't displayed).

  [1]: http://stackoverflow.com/questions/4872592/multiple-font-face-in-css