css - Why is @font-face throwing a 404 error on woff files? - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
I'm using @font-face on my company's site and it works/looks great. Except Firefox and Chrome will throw a 404 error on the .woff file. IE does not throw the error. I have the fonts located at the root but I've tried with the fonts in the css folder and even giving the entire url for the font. If remove those fonts from my css file I don't get a 404 so I know it's not a syntax error.
Also, I used fontsquirrels tool to create the @font-face fonts and code:
@font-face
font-family: 'LaurenCBrownRegular';
src: url('/laurencb-webfont.eot');
src: local('?'),
url('/laurencb-webfont.woff') format('woff'),
url('/laurencb-webfont.ttf') format('truetype'),
url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
font-weight:
font-style:
@font-face
font-family: 'FontinSansRegular';
src: url('/fontin_sans_r_45b-webfont.eot');
src: local('?'),
url('/fontin_sans_r_45b-webfont.woff') format('woff'),
url('/fontin_sans_r_45b-webfont.ttf') format('truetype'),
url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
font-weight:
font-style:
17.8k32779
3,215113252
I was experiencing this same symptom - 404 on woff files in Chrome - and was running an application on a Windows Server with IIS 6.
If you are in the same situation you can fix it by doing the following:
"Simply add the following MIME type declarations via IIS Manager (HTTP Headers tab of website properties): .woff
application/x-woff"
Update: according to
the actual MIME type is application/x-font-woff (for Chrome at least). x-woff will fix Chrome 404s, x-font-woff will fix Chrome warnings.
Thanks to Seb Duggan:
You can also add the MIME types in the web config:
&system.webServer&
&staticContent&
&remove fileExtension=".woff" /& &!-- In case IIS already has this mime type --&
&mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /&
&/staticContent&
&/system.webServer&
80.6k13135175
12.6k63557
Actually the @Ian Robinson answer works well but Chrome will continue complain with that message :
"Resource interpreted as Font but transferred with MIME type application/x-woff"
If you get that, you can change from
application/x-woff
application/x-font-woff
and you will not have any Chrome console errors anymore !
(tested on Chrome 17)
The answer to this post was very helpful and a big time saver. However, I found that when using FontAwesome 4.50, I had to add an additional configuration for woff2 type of extension also as shown below else requests for woff2 type was giving a 404 error in Chrome's Developer Tools under Console> Errors.
&staticContent&
&remove fileExtension=".woff" /&
&!-- In case IIS already has this mime type --&
&mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /&
&remove fileExtension=".woff2" /&
&!-- In case IIS already has this mime type --&
&mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" /&
&/staticContent&
4,740114286
Run IIS Server Manager (run command : inetmgr)
Open Mime Types and add following
File name extension:
MIME type: application/octet-stream
2,698135189
Solution for IIS7
I also came across the same issue. I think doing this configuration from the server level would be better since it applies for all the websites.
Go to IIS root node and double-click the "MIME Types"
configuration option
Click "Add" link in the Actions panel on the top right.
This will bring up a dialog. Add .woff file extension and specify
"application/x-font-woff" as the corresponding MIME type.
Add MIME Type for .woff file name extension
Here is what I did to solve the issue in IIS 7
Solved it:
I had to use
3,215113252
This might be obvious, but it has tripped me up with 404s a number of times... Make sure the fonts folder permissions are set correctly.
Also check your URL rewriter. It may throw 404 if something "weird" was found.
38.1k2595195
I tried a ton of things around permissions, mime types, etc, but for me it ended up being that the web.config had removed the Static file handler in IIS, and then explicitly added it back in for directories that would have static files. As soon as I added a location node for my directory and added the handler back, the requests stopped getting 404s.
In addition to Ian's answer, I had to allow the font extensions in the request filtering module to make it work.
&system.webServer&
&staticContent&
&remove fileExtension=".woff" /&
&remove fileExtension=".woff2" /&
&mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /&
&mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" /&
&/staticContent&
&security&
&requestFiltering&
&fileExtensions&
&add fileExtension=".woff" allowed="true" /&
&add fileExtension=".ttf" allowed="true" /&
&add fileExtension=".woff2" allowed="true" /&
&/fileExtensions&
&/requestFiltering&
&/security&
&/system.webServer&
If you dont have access to your webserver config, you can also just RENAME the font file so that it ends in svg (but retain the format). Works fine for me in Chrome and Firefox.
If you are using CodeIgniter under IIS7 :
In your web.config file, add woff to the pattern
&rule name="Rewrite CI Index"&
&match url=".*" /&
&conditions&
&add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" /&
&/conditions&
&action type="Rewrite" url="index.php/{R:0}" /&
Hope it helps !
IIS Mime Type: .woff font/x-woff (not application/x-woff, or application/x-font-woff)
tired all possible way, no luck.
I am using Visual Studio 201 use IIS Express.
But updating MimeType in IIS or put static content in Web.config doesn't help.
What i m missing?
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled开发一个系统用了一个框架显示图标，在刷新时发现浏览器加载网页都要一直加载很久最后报404错误，通过firebug观察网络记录花了差不多30多秒，在此期间网页上的图标都是乱码。
等了一段时间下面图标才显示正常，期望的是立刻显示正常。奇怪的是字体文件加载显示404了怎么图标还能正常显示呢？真是奇怪
找了找网上资料说是因为IIS那边要设置允许这个后缀名。现在复制过来一下。
问题：最近在IIS上部署web项目的时候，发现浏览器总是报找不到woff、woff2字体的错误。导致浏览器加载字体报404错误，白白消耗了100-200毫秒的加载时间。
原因：因为服务器IIS不认SVG，WOFF/WOFF2 这几个文件类型，只要在IIS上添加MIME&类型即可。
1、打开服务器IIS管理器，找到MIME类型。
2、添加MIME类型 添加三条：　　
&&&&&&&文件扩展名&&&&& MIME类型　
.svg&&&&&&&&&&&& image/svg+xml
.woff&&&&&&&&&&& application/x-font-woff
.woff2&&&&&&&&& application/x-font-woff
注：本文在win8环境下IIS7版本中填写的MIME类型，在IIS6、IIS7 MIME类型管理所处位置不一样，但是添加方式和参数均相同。
部分参考：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：269372次
积分：4194
积分：4194
排名：第4554名
原创：138篇
转载：12篇
评论：171条
(2)(2)(4)(1)(1)(1)(1)(3)(3)(1)(1)(1)(1)(2)(1)(5)(1)(5)(6)(8)(2)(1)(1)(5)(2)(4)(4)(8)(11)(1)(1)(5)(7)(9)(5)(5)(6)(7)(7)(9)二次元同好交流新大陆
扫码下载App
汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
谋而后动 动必有成
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(2858)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'IIS无法加载字体文件(*.woff,*.svg)的解决办法',
blogAbstract:'\r\n在编写前端代码的过程中经常会遇到使用特定的字体(*.woff,*.svg)，此时在加载字体时请求会被返回\r\nFailed to load resource: the server responded with a status of 404 (Not Found)。\r\n原因是，默认在IIS上是没有添加对*.woff,*.svg文件的Mime类型，因此在客户端请求此类文件时得到的都是404。\r\n所以我们只需要在我们对应网站下的Mime类型中添加文件对应的类型就行了\r\n&\r\n\r\n.woff& application/x-font-woff \r\n.',
blogTag:'mime类型',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:5,
publishTime:2,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'谋而后动 动必有成',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}}