1

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:

Font-face error (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/*
  • Where are your fonticon-files located? – Victor In Jun 30 '14 at 15:05
  • @VictorIn I just added my folder structure, they are in a subfolder near the css file – Mario Jun 30 '14 at 15:47
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:

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

.

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

  • 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 Jul 1 '14 at 9:18
  • Glad you got it sorted. – Victor In Jul 1 '14 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.