I get the following error in my ASP.Net MVC page when running in IIS
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): status=2147746065 source: http://localhost/MyApp/fonts/fontawesome-webfont.woff?v=4.1.01 sharedStyle:1:126778
The same page running locally, everything works fine. All files are deployed
and the path to FA is C:\inetpub\wwwroot\MyApp\Content\Template\font-awesome-4.1.0
I tried all solutions from Why font-awesome works on localhost but not on web ? and ASP.NET MVC4 Bundling with Twitter Bootstrap
UPDATE:
I added fileExtensions to system.webServer as suggested by Shyju, but it did not change the problem.
Is it possible that there is a problem with bundling? I use it in the following way:
public static void RegisterBundles(BundleCollection bundles)
{
StyleBundle sharedStyleBundle = new StyleBundle("~/bundles/sharedStyle");
sharedStyleBundle.Include("~/Content/Template/font-awesome-4.1.0/css/font-awesome.css");
...
bundles.Add(sharedStyleBundle);
...
}
IIS does not know how to serve these new types of files. We should explicitly tell that these are good file types.
Add this section to your web.config under <system.webServer> section. That should fix it.
<staticContent>
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
Sometimes, If it is already added ,you need to remove it and re-add it to avoid possible conflicts/errors.
<staticContent>
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<remove fileExtension=".otf" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="font/x-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
I had to change the bundling as follows:
public static void RegisterBundles(BundleCollection bundles)
{
StyleBundle sharedStyleBundle =
new StyleBundle("~/Content/Template/font-awesome-4.1.0/css/bundle");
sharedStyleBundle
.Include("~/Content/Template/font-awesome-4.1.0/css/font-awesome.css");
bundles.Add(sharedStyleBundle);
...
}
It seems to be important, that the key for the bundle has the same structure as the bundle path itself.
Related
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
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.
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
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
#font-face not working on a client site?
I have the following font files in this folder structure in my ASP.Net MVC web app:
-[root]
|-- Public
||--fonts
|||--NuvoWeb-Medi.eot
|||--NuvoWeb-Medi.woff
In my CSS file I have the following font declaration:
#font-face
{
font-family: NuvoWeb;
src: url(/Public/fonts/NuvoWeb-Medi.eot);
}
#font-face
{
font-family: NuvoWeb;
src: url(/Public/fonts/NuvoWeb-Medi.woff) format('woff');
}
However, when I run the app, Firebug returns the following error:
"NetworkError: 404 Not Found -
http://localhost:60194/Public/fonts/NuvoWeb-Medi.woff"
Please advise as to what I am missing in order to get this to work.
Found the solution here...
The problem is that IIS doesn’t know how to serve these new files unless we tell it how. This can be easily done in the web.config’s in the web.config’s <system.webServer> section by adding the following snippet:
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
<mimeMap fileExtension=".m4v" mimeType="video/m4v" />
<mimeMap fileExtension=".ogg" mimeType="video/ogg" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm" />
<mimeMap fileExtension=".oga" mimeType="audio/ogg" />
<mimeMap fileExtension=".spx" mimeType="audio/ogg" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="image/svg+xml" />
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".otf" mimeType="font/otf" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
</staticContent>
Note that some of these extensions may already be handled in IIS (for me, .svg was fine). You either need to remove those maps from this section, or include additional <remove> lines like the one for .eot.
Register the MIME type in web.config as follows:
<system.webServer>
<staticContent>
<remove fileExtension=".eot" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
</staticContent>
</system.webServer>
This solves the problem.
public folder(css here) ---> font folder (font here -NuvoWeb-Medi.eot)
#font-face
{
font-family: 'NuvoWeb';
src: url(fonts/NuvoWeb-Medi.eot);
}
you were missed quotation symbol font-family: 'NuvoWeb';