Font-face in plugin

Question

I'm trying to use a custom icon font for a plugin, so I added it with font-face like so:

/* styles.css */

@font-face {
  font-family: 'scrawlfont';
  src:url('fonts/icomoon.eot');
  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('fonts/icomoon.woff') format('woff'),
    url('fonts/icomoon.ttf') format('truetype'),
    url('fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

My folder structure is as follows:

plugin directory/
  resources/
    css/
      styles.css (contains the font-face snippet above)
      fonts/
        icomoon.eot
        icomoon.woff
        icomoon.ttf
        icomoon.svg

Problem

When I load my page I get 404 not found errors for all font files except .eot

Here is a screenshot:

(Click to enlarge)

Any thoughts appreciated, Mario

EDIT: Solution:

I had wrong permissions on my font folder and files. I set correct permissions using:

chmod 755 fonts/
chmod 644 fonts/*

Answer 1

Your paths and file-names look good to me. Since everything except .eot gives you a 404 error, I assume it has something to do with the MIME Types, or browser support:

On Apache and IIS you sometimes have to add the MIME-Types yourself, see:

• Answer on StackOverflow
• Firefox @fontface cross domain errors & workarounds

Also check if your fonts load on other browsers, if so check out this article:

• Mo' Bulletproofer @Font-Face

.

P.S. Also since every resource request goes through the ìndex.php, it might as well be a Craft bug.