0

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)
alaskey
  • 151
  • 1
  • 1
  • 4
  • Try using absolute paths for the fonts. I have read a few articles before mentioning issues like this. Google is your friend in this case – seemly Jul 22 '13 at 19:38
  • Tried it, and unfortunately that didn't seem to work in this case. Thanks for the suggestion though. – alaskey Jul 22 '13 at 20:35

0 Answers0