I'm already aware of the fact that fonts are not correctly recognized in IIS and I've already configured it web.config:
<system.webServer>
<staticContent>
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
</system.webServer>
But this is different. In my html prototype I have correctly positioned icons of the arrows:
However, when running the same prototype under IIS I arrows are not positioned correctly and are oval shaped instead of circles.
Any idea?
You could try embedding the woff file in you CSS file. This eliminates the IIS issue.
Explanation for base64 font integration
Related
After some research i've noticed that in order to use woff2 font types with IIS you need to set the following on the web project's web.config in order to avoid getting 404s from the server:
<staticContent>
<remove fileExtension=".woff"/>
<remove fileExtension=".woff2"/>
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
Locally, this seem to work, but when the project is deployed on IIS, I keep getting 404s, what could be the cause of the issue? Thanks
I had the same the problem today; I discovered the fonts were not included/added in my project.
I am trying to display an svg image.
When I display the svg image with the below code is does not display.
<img src="/img/logo.svg" alt="Logo">
I also tried this syntax, but then it downloads instead of displaying.
<embed type="image/svg+xml" src="/img/logo.svg" />
I have already set the mime type to image/svg+xml in web.config.
<staticContent>
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<remove fileExtension=".svgz" />
<mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
</staticContent>
It appears to be seeing the file type as application/octet-stream even though I have defined it at image/svg+xml. I am running and ASP.NET site with IIS 7.
I recently ran into this problem and my web.config syntax for the mime type looks slightly different to yours.
This:
<staticContent>
<mimeMap fileExtension="svg" mimeType="image/svg+xml" />
</staticContent>
is all I added and it fixed the problem. Hope it helps!
Add the following to your web config:
<system.webServer>
<staticContent>
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
<handlers>
<add name="SVG Handler" path="*.svg" verb="*" modules="StaticFileModule,DefaultDocumentModule,DirectoryListingModule" resourceType="Unspecified" />
</handlers>
</system.webServer>
If you have access to .htaccess file (at the root), add this line of code:
AddType image/svg+xml .svg .svgz
I have a WordPress site running on Azure Websites and I'm trying to get the Azure CDN setup. I have the endpoint and storage configured. All of the files have been uploaded.
My issue is with WOFF and TTF files. Chrome is reporting a 200 OK status, but the file size is 0KB. The Console in Firebug reveals the CORS issue. The font is definitely not working as I'm just getting a block icon where these fonts are used.
I have the Azure CORS rules setup. Here's a snapshot...
Allowed origins: http://fonts.gstatic.com, http://cdn.devsoftsolutions.com
Allowed methods: Get, Head, Put
Allowed headers: x-ms-*
Exposed headers: x-ms-*
Max age (seconds): 200
Here's my web.config settings...
<staticContent>
<remove fileExtension="svg" />
<remove fileExtension="eot" />
<remove fileExtension="woff" />
<remove fileExtension="ttf" />
<remove fileExtension=".svg" />
<remove fileExtension=".eot" />
<remove fileExtension=".woff" />
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
<mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
<mimeMap fileExtension=".ttf" mimeType="application/font-ttf" />
<mimeMap fileExtension=".ttf" mimeType="application/vnd.ms-fontobject" />
</staticContent>
The site that I'm trying to get this working on is http://dev.devsoftsolutions.com
I wonder how do you expect WOFF and TTF to be working when you define more than one mimeMap per extension?! How do you expect IIS to handle this?! You shall only define exactly one mime map per extension (IIS takes the last defined!). Your correct configuration shall look like this:
<staticContent>
<remove fileExtension="svg" />
<remove fileExtension="eot" />
<remove fileExtension="woff" />
<remove fileExtension="ttf" />
<remove fileExtension=".svg" />
<remove fileExtension=".eot" />
<remove fileExtension=".woff" />
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".ttf" mimeType="application/vnd.ms-fontobject" />
</staticContent>
And you can always consult IANA on which are the correct mime types. On this demo site you shall be able to see a briefcase icon from WOFF file. You can use browser debugging tools or Fiddler to see that the WOFF is correctly transferred and interpreted by the browser.
Oh, and another note - you do not need to enable CORS for Google's fonts! CORS is only required when you want to SEND data using JavaScript or make AJAX calls! Google fonts come to your site with simple script src and CSS #url() for which CORS is not required.
To display Bootstrap 3.0 glyphicons on Windows Phone, I was forced to add the following section to my web.config file:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>
</system.webServer>
The problem now, is that it breaks development in Debug mode on DEV machines. The error is:
500.19 Internal Server Error
Cannot add duplicated collection entry of type 'mimeMap' with unique key attribute 'fileExtension' set to '.woff'.
How can I solve it? I am using Visual Studio 2013 on Win 8.1.
Thanks.
Solved using the following transform on the Web.Release.config file. In this way it only affects production website:
<system.webServer xdt:Transform="Insert">
<staticContent>
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
</staticContent>
</system.webServer>
I am trying to add bootstrap glyphicons-halflings-regular.svg to my web site. Locally everything works fine, but on Azue I have 404 errors:
The resource you are looking for has been removed, had its name
changed, or is temporarily unavailable.
or when I add below staticContent section to my web.config
<staticContent>
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".ttf" />
<mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
<remove fileExtension=".svg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
</staticContent>
I got this error:
The controller for path
'/Content/fonts/glyphicons-halflings-regular.woff' was not found or
does not implement IController.
How should I proper configure my ASP.NET site to avoid above errors?
I hit the same problem with .woff file. Solution with adding that extension to web.config works fine:
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
(see oryginal solution: http://www.codepal.co.uk/show/WOFF_files_return_404_in_Azure_Web_Sites)
When I put the suggested lines into web.config it didn't work. Instead I put the following lines into Web.config (note the capital letter)
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
<mimeMap fileExtension="woff2" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
I did not include font files in solution. This caused that publishing website does not contains this files.
If you are using the continuous deployment on Azure, verify that the "build action" of all the files that you need is Content and not None.
Have you fixed the paths in the css file that are referring to the font files? Bootstrap assumes that the css file is inside a css directory and fonts is inside a fonts-directory on the same level as the css-directory.
When you run in Azure, the site is probably running in Release-mode. This means that your css and javascript is minified and bundles. This may break your setup sometimes.
I've done the following setup when including bootstrap in my projects:
Unzip bootstrap files into the /Content directory.
Add the following lines to App_Start/BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/bootstrap/css/bundle")
.Include("~/Content/bootstrap/css/bootstrap.css"));
bundles.Add(new ScriptBundle("~/Content/bootstrap/js/bundle")
.Include("~/Content/bootstrap/js/bootstrap.js"));
Add the following lines to View/Shared/_Layout.cshtml
#Styles.Render("~/Content/bootstrap/css/bundle")
#Scripts.Render("~/Content/bootstrap/js/bundle")
Note that jQuery must be included before the Bootstrap js-bundle.
http://hj-dev.blogspot.no/2013/02/add-twitter-bootstrap-to-mvc4.html