Fonts Are Not Rendered Correctly in Release Mode, But Is Working on Debug Mode in Asp Net Webforms

bundling css works but fonts not loading

When you do this:

url('../fonts/fontawesome-webfont.woff?v=4.0.3')

you are referring to the fonts via a relative path. If you then put your CSS bundle at /bundles/Content/Notebook/css it will look in bundles/content/fonts since that's combination of your relative path and where the browser see your css-file.

A few possible options (either):

• Change your bundle path:

  bundles.Add(new StyleBundle("~/Content/Notebook/css") ...
  (the reason your css files didn't load when you removed bundles was that you didn't change the name of the stylebundle)
  

  and

  @Styles.Render("~/Content/Notebook/css")
  

• Reference your fonts with an absolute path:

  url('/Content/notebook/fonts/fontawesome-webfont.woff?v=4.0.3')
  

Why font-awesome works on localhost but not on web ?

I've just loaded your webpage and checked the net tab of firebug.

your following urls returned a 404:

http://www.senocakonline.com/Content/font/fontawesome-webfont.woff

http://www.senocakonline.com/Content/font/fontawesome-webfont.ttf

i would assume that those being missing is the reason your icons aren't displaying.

UPDATE: 23.10.2015
to make it available just add this code to your WebConfig:

<system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

Fonts are not rendered properly

Your link tag should look like

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>

You need to include each of the font weights that you want in the URL.

Your styles should be:

article h1
{
    color: #0140be;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    font-weight: 300;   
}

article p.txtDesc
{
    line-height:1.6;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    margin-left: 18px;
    font-weight: 400;          
}

You select which font style you want with the font-weight attribute.

JSFiddle

@font-face embeded in aspx file not working

You need to set the MimeTypes within IIS:

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
        <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        <mimeMap fileExtension=".otf" mimeType="font/opentype" />
    </staticContent>
</system.webServer>

You can then use relative paths to the fonts i.e.

 @font-face{
            font-family:Junction;
            src : url("/fonts/Junction.otf") format('opentype');
        }
        @font-face{
            font-family:chunkfive;
            font-weight:bold;
            src : url("/fonts/chunkfive.otf") format('opentype');
        }

Font files are not loading with ASP.NET Bundles

I think CssRewriteUrlTransform might be the way to go:

https://msdn.microsoft.com/en-us/library/system.web.optimization.cssrewriteurltransform(v=vs.110).aspx

Used like so:

.Include("~/Content/bootstrap-cosmo.min.css", new CssRewriteUrlTransform())

Worked for me.

CSS-defined font not found

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.

---

Related Topics