Bootstrap framework references Woff fonts do not display correctly after Web publishing _javascript tips

When a Web site is published to IIS, the Woff font referenced by the bootstrap framework used by the site is found to be not displayed properly. The HTTP request was tracked, and a woff 404 (not Found) problem was found in the Woff font request, but the files for Woff fonts in the project were not lost. After the investigation, the original is the server on IIS did not add Woff font MIME type, resulting in the sending of HTTP requests, IIS cannot process and recognize this type of file.

Workaround 1: Add the MIME type of the Woff font to the Web.config configuration file

Emancipation Method 2: Add the MIME type of the Woff font to IIS
Introduction to Woff Fonts
Introduction to MIME Types

Workaround One: Add the MIME type of the Woff font to the Web.config configuration file

If the site is written using asp.net or asp.net MVC, it is convenient to use the configuration file directly to configure Woff fonts. 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>

Note here that this configuration is added to prevent this error: "When the unique key attribute" FileExtension "is set to". Woff ", you cannot add a duplicate collection item of type" MimeMap ", which you can click on to see the solution. If you add only the following node and do not report this error, the Remove node may not be added. Also "Font/x-font-woff" is the MIME type value of the Woff font.

After you add this node to the Web site's profile, the Woff font is displayed normally when you reopen the Web site. This method can be used as a solution when you do not have permission to manipulate IIS Manager.

Emancipation Programme II: Add the MIME type of the Woff font to IIS

If you can directly manipulate IIS Manager, you can also add the MIME type of the Woff font directly to IIS. Just open the current IIS, open the MIME type configuration, and finally add a new MIME type, where the Woff font extension is. woff, and the MIME type is: "Font/x-font-woff." The specific actions are as follows:

Open the IIS Manager in Control Panel, select Current IIS, and open the MIME type configuration;

Add. Woff screenshots in IIS;

Click on the MIME type to the right side of the bar to add functionality;

Add a. woff MIME type screenshot;

Pop-up Add MIME Type dialog box, fill in the file extension. woff,mime type can be filled in font/x-font-woff or application/x-font-woff;

Set the file name extension and type;

Click OK to successfully add the. woff extension Mimi TYPE, now open the Web site request Woff font will not appear 404 Not Found error.

Introduction to Woff Fonts

Web Open font formats (Web open font format, short woff) are the font format standards used in Web pages. This font format was developed in 2009 and is now being standardized by the Web font Working group of the World Wide Web Consortium to become a recommended standard. Not only does this font format effectively use compression to reduce file size, but it does not contain encryption and is not subject to DRM (digital copyright management) restrictions.

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

Woff MIME type is: Application/x-font-woff (Font/x-font-woff also can), the current IIS7 inside the default does not have this MIME type, if you want to allow the site to support this, Please add Woff to the MIME type inside the IIS7.

Introduction to MIME Types

MIME (Multipurpose Internet Mail Extensions) Multipurpose Internet Mail Extension type, which sets the type of file that an extension is opened with an application, and when the file is accessed, The browser will automatically open using the specified application. Used to specify some client-defined file names and how some media files are opened.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.