加载ttf自定义CSS字体时触发MIME类型错误的问题求助

错误产生的核心原因 #

这个MIME报错基本是你手写的错误HTML引入代码直接触发的，不存在复杂的底层问题：
你在head里加的那行<link rel="stylesheet" src="Branda-yolq.ttf">从属性到用途全错：

• 自定义字体完全不需要通过HTML的link标签引入，CSS里写好@font-face规则就可以自动完成字体加载，这行代码本身毫无作用。
• 你给link标签设了rel="stylesheet"，浏览器会默认把这个路径下的资源当成CSS文件，严格校验返回的MIME类型必须是text/css；但实际加载的是ttf字体文件，返回的类型是字体格式，和预期不匹配，浏览器直接阻断加载抛出MIME类型错误。
• 另外link标签加载外部资源本该用href属性，你错写成了src（这个属性是img、script这类标签用来直接嵌入资源用的），写法本身就不规范。

如果删掉这行错误代码后，部署到线上服务器还是报同样的错，那才是服务器配置问题：服务器没有给.ttf后缀的文件配置正确的MIME返回头，默认把字体文件当成未知二进制流返回，通不过浏览器的资源类型校验。

对应解决方法 #

• 第一步直接删掉HTML里那行错误的字体引入代码，不需要在HTML的head里加任何和字体加载相关的标签。
• 优化CSS中@font-face的写法，补充格式声明减少不必要的校验歧义，参考标准写法：

@font-face {
    font-family: "skot";
    src: url("Branda-yolq.ttf") format("truetype");
    font-display: swap;
}

• 如果线上环境依然报MIME错误，给服务器补充.ttf后缀文件的响应头配置，将对应资源的MIME类型设置为font/ttf，让浏览器可以正确识别字体资源。
• 最后记得在需要应用这个字体的元素样式中，加上font-family: skot;的声明，否则即使字体正常加载也不会生效。

内容的提问来源于stack exchange，提问作者Marouane Elalama