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:
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/*