I'm using @font-face for icons on a clients site, and everything works fine on our development server. On our clients host, however, they render as empty characters in Chrome, Firefox, and Safari.
- I've tried changing the permissions to 777 on the fonts folder and the files themselves
- Chrome developer tools show the font files downloaded with 200 status
- Our dev server generates this warning in Chrome, "Resource interpreted as Font but transferred with MIME type application/octet-stream". On the client's server we get "Resource interpreted as Font but transferred with MIME type text/html". I updated the .htaccess file, but it still has the same warning.
CSS:
@font-face {
font-family: 'fire';
src: url("../fonts/fire.eot");
src: url("../fonts/fire.eot?#iefix") format("embedded-opentype"),
url("../fonts/fire.woff") format("woff"),
url("../fonts/fire.ttf") format("truetype"),
url("../fonts/fire.svg#fire") format("svg");
font-weight: normal;
font-style: normal;
}
.htaccess in /wp/
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>
# BEGIN MemberPress Rules
<IfModule mod_rewrite.c>
RewriteRule memberpress\/lock\.php$ - [L]
RewriteCond %{REQUEST_URI} !\. (php|phtml|jpg|jpeg|gif|css|png|js|ico|PHP|PHTML|JPG|JPEG|GIF|CSS|PNG|JS|ICO)
RewriteCond %{REQUEST_URI} !^/wp/(wp-admin|wp-login.php|wp-comments-post.php|xmlrpc.php)
RewriteRule . /wp/wp-content/plugins/memberpress/lock.php [L]
</IfModule>
# END MemberPress Rules
# END WordPress
I'm guessing it's a server issue, but I don't know much about their server besides ftp info, though I could probably get more access if I need to. I also included the wordpress bits of the .htaccess file, because I'm not sure if that might be effecting the rules I added.
Any ideas? I've never had an issue before using @font-face.
EDIT-- SOLVED!
We managed to solve the problem. Turns out it was a Wordpress plugin, Memberpress, that was blocking the file.
I added the font file extensions to this line in the .htaccess file:
RewriteCond %{REQUEST_URI} !\.(php|phtml|jpg|jpeg|gif|css|png|js|ico|eot|ttf|otf|woff|svg|PHP|PHTML|JPG|JPEG|GIF|CSS|PNG|JS|ICO|EOT|TTF|OTF|WOFF|SVG)