The solution to the problem that the Bootstrap framework cannot display the woff font properly after the website is published

After publishing the website to IIS, I found that the woff font referenced by the Bootstrap framework used by the website could not be displayed properly. So I traced the http request and found that the woff font request had a GET .woff 404 (Not Found) problem, but the woff font file in the project was not lost. After investigation, it turned out that IIS on the server did not add the MIME type of woff font, which caused IIS to be unable to process and recognize files of this type when sending HTTP requests.

Solution 1: Add the MIME type of woff font in the Web.config configuration file

Liberation method 2: Add the MIME type of woff font in IIS
Woff font introduction
MIME type introduction

Solution one: Add the MIME type of the woff font in the Web.config configuration file

If the website is written using ASP.NET or ASP.NET MVC, you can easily use the configuration file to configure the woff font directly. Just add the following configuration to the system.webServer node in Web.config.

<system.webServer>
<staticContent>
 <remove fileExtension=".woff" />
 <mimeMap fileExtension=".woff" mimeType="font/x-font-woff" /> 
</staticContent>
</system.webServer>

What you need to pay attention to here is this configuration. Adding this node is to prevent this error: "When the unique key attribute "fileExtension" is set to ".woff", the type "mimeMap" cannot be added. Duplicate collection items", you can click this link to view the solution to this problem. If you only add the following node and no error is reported, the remove node does not need to be added. In addition, "font/x-font-woff" is the MIME type value of the woff font.

After adding this node to the configuration file of the website, the woff font can be displayed normally when the website is reopened. This method can be used as a solution when you do not have permission to operate the IIS manager.

Liberation plan two: Add the MIME type of woff font in IIS

If you can directly operate the IIS manager, you can also add the mime type of woff font directly on IIS. Just open the current IIS, open the MIME type configuration, and finally add a new MIME type. The extension of the woff font here is .woff, and the MIME type is: "font/x-font-woff". The specific operations are as follows:

Open the IIS manager in the control panel, select the current IIS, and open the MIME type configuration;

Add a .woff screenshot in IIS;

Click the add function in the operation column to the right of the MIME type;

Add a screenshot of the MIME type of .woff;

In the pop-up Add MIME type dialog box, fill in .woff as the file extension, and fill in font/x-font-woff or application/x-font-woff as the MIME type;

Settings File extension and type;

After clicking OK, the MIMI TYPE with the .woff extension was successfully added. Now when you open the website to request the WOFF font, there will be no 404 NOT FOUND error.

Introduction to woff font

Web Open Font Format (WOFF) is a font format standard used by web pages. This font format was developed in 2009 and is now being standardized by the World Wide Web Consortium's Web Font Working Group to become a recommended standard. This font format not only effectively uses compression to reduce file size, but also does not contain encryption and is not subject to DRM (Digital Rights Management) restrictions.

After the Mozilla Foundation, Opera Software and Microsoft submitted WOFF on April 8, 2010, the World Wide Web Consortium commented that it hoped that WOFF would soon become a "single, interoperable (font) supported by all browsers" )Format". [6] On July 27, 2010, the World Wide Web Consortium released WOFF as a working draft.

The MIME type of WOFF is: application/x-font-woff (font/x-font-woff is also acceptable). This MIME type is not available by default in IIS7. If you want the website to support this, please set the MIME in IIS7 Add woff in the type.

Introduction to MIME types

MIME (Multipurpose Internet Mail Extensions) is a multipurpose Internet mail extension type, which is a type that sets a file with a certain extension to be opened by an application. When the file with the extension is accessed , the browser will automatically use the specified application to open. It is mostly used to specify some client-defined file names and some media file opening methods.