Monday, September 10, 2012

How to: Ensure IIS and ASP.NET MVC Play Nice with Web Fonts [Field Notes]

Problem

I'm using ASP.NET MVC via IIS and would like to make use of Web Fonts.

Solution

There are two steps:

  • Make sure your Web Font files are going to be outputted by your build process.
  • Make sure IIS can serve those web files.
Step 1: Make Sure Your Web Font Files are Going to be Outputted by Your Build Process
  • In Visual Studio, select all your web font files (EOT, SVG, TTF, and WOFF files)
  • Right-click on them and select properties or look at the properties window.
  • Set the Build Action Property to "Content"
  • Set the Copy to Output Directory property to "Copy Always".
Step 2: Make Sure IIS Can Serve Your Web Font Files

In IIS, make sure you have the following file extensions and the corresponding MIME types:
  • .eot --> application/octet-stream
  • .woff --> application/x-woff
  • .svg --> image/svg+xml

and bingo! Build/deploy your package and it should be right as rain.

References

How to: Ensure LESS works with ASP.NET MVC and Continuous Integration [Field Notes]

Problem
  • I use LESS instead of CSS in my ASP.NET MVC app.
  • I would like it to actually work.
Solution

There are two steps (that I know of) to fixing this problem. The first is to make sure that your build package will actually output the LESS files in the first place; the second is to ensure that IIS can serve them.

Step 1: Ensuring that the Build Package outputs LESS files

  • In your solution, highlight all your LESS files
  • Right-click and select properties or look in the properties window.
  • Set the Build Action property to "Content". This will ensure that the raw content is outputted from those files during build instead of another build action.
  • Set the Copy to Output Directory property to "Copy Always". This ensures that your LESS files will actually make it into the package folder that MSBuild outputs.
Step 2: Ensuring that IIS can serve LESS files


When using Twitter Bootstrap LESS with IIS, don't forget to create the MIME Type [Field Notes]

Problem

I am using the Twitter Bootstrap LESS source with LessJS in an ASP.NET MVC3 Project that deploys to IIS.

  • When I run my local source, the web site displays fine.
  • When I run my build process, it completes fine.
  • When I open the site on my development or production boxes, the CSS doesn't display.

Solution
After making the problem much more complicated than it had to be, I realized that my LESS file wasn't being found by IIS -- not because it wasn't there or wasn't being deployed, but because I had never configured IIS to serve LESS files. Rookie move.

To ensure IIS can serve LESS files, take the following steps:

  • Open the IIS 7 Manager application
  • Navigate to your server.
  • From the different options displayed, select MIME Types.
  • On the right-hand side, from the Actions menu, select Add...
  • In the File name extension field, enter ".less"
  • In the MIME type field, enter "text/css"
  • Click OK to add the MIME type.
Bingo! Now your server won't choke when trying to serve a .less file.