<p>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 <a href="http://en.wikipedia.org/wiki/Internet_media_type" rel="nofollow noreferrer">MIME Types</a>, or browser support:</p>

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

<ul>
<li><a href="https://stackoverflow.com/a/7374640/3589841">Answer on StackOverflow</a></li>
<li><a href="https://coderwall.com/p/v4uwyq" rel="nofollow noreferrer">Firefox @fontface cross domain errors &amp; workarounds</a></li>
</ul>

<p>Also check if your fonts load on other browsers, if so check out this article:</p>

<ul>
<li><a href="http://readableweb.com/mo-bulletproofer-font-face-css-syntax/" rel="nofollow noreferrer">Mo' Bulletproofer @Font-Face</a></li>
</ul>

<p>.</p>

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

CC BY-SA 3.0
2014-07-01T09:18:10.220Z
I tried adding the Mimetypes but no luck. Then I tried on Windows and Wampserver and had no errors. Back to linux and after some digging I found the culprit: permissions! So, I changed the folder to 755 and the font files to 644 and tada it's working!
Mario
CC BY-SA 3.0
2014-07-01T14:27:13.293Z
Glad you got it sorted.
Victor
CC BY-SA 3.0
2014-06-30T16:46:47.007Z
2014-06-30T16:46:47.007Z
2017-05-23T12:38:53.957Z
Victor
<p>I'm trying to use a custom icon font for a plugin, so I added it with font-face like so:</p>

<pre class="lang-css prettyprint-override"><code>/* 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;
}
</code></pre>

<p>My folder structure is as follows:</p>

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

<p><strong>Problem</strong></p>

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

<p>Here is a screenshot:</p>

<p><img src="https://i.sstatic.net/KipUf.png" alt="Font-face error">
<a href="https://i.sstatic.net/KipUf.png" rel="nofollow noreferrer">(Click to enlarge)</a></p>

<p>Any thoughts appreciated, Mario</p>

<p><strong>EDIT: Solution:</strong></p>

<p>I had wrong permissions on my font folder and files.
I set correct permissions using:</p>

<pre><code>chmod 755 fonts/
chmod 644 fonts/*
</code></pre>

CC BY-SA 3.0
2014-06-30T15:05:22.697Z
Where are your fonticon-files located?
Victor
CC BY-SA 3.0
2014-06-30T15:47:41.137Z
@VictorIn I just added my folder structure, they are in a subfolder near the css file
Mario
<plugin-development>
Font-face in plugin
# Font-face in plugin

(Asked by: username_0 on 2014-06-30)

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, username_0
EDIT: Solution:
I had wrong permissions on my font folder and files.
I set correct permissions using:
chmod 755 fonts/
chmod 644 fonts/*

**Tags:** plugin-development

> **Comments:**
> **username_1**: Where are your fonticon-files located?  
> **username_0**: @username_1In I just added my folder structure, they are in a subfolder near the css file  

---

## 1 answers

### Answer by username_1 on 2014-06-30. Score: 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](http://en.wikipedia.org/wiki/Internet_media_type), or browser support:

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

* [Answer on StackOverflow](https://stackoverflow.com/a/7374640/3589841)
* [Firefox @fontface cross domain errors & workarounds](https://coderwall.com/p/v4uwyq)

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

* [Mo' Bulletproofer @Font-Face](http://readableweb.com/mo-bulletproofer-font-face-css-syntax/)

.

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

> **Comments:**
> **username_0**: I tried adding the Mimetypes but no luck. Then I tried on Windows and Wampserver and had no errors. Back to linux and after some digging I found the culprit: permissions! So, I changed the folder to 755 and the font files to 644 and tada it's working!  
> **username_1**: Glad you got it sorted.  

---

