loading web fonts in asp.net website

Question

I have been doing asp.net web development for a while but never implemented a complete asp.net website and hosted it. I have been working on an asp.net web site and hosted it on windows server.

I have couple of custom web fonts (paid fonts) which i am using in the site. I have included the files for the web fonts and styles in my project folder and referenced them properly in my style sheet.

I have used the @font-face in referring the fonts in my style sheet:

@font-face {
font-family: 'fontname';
src: url('/fonts/webfonts/font.eot');
src: url('/fonts/webfonts/font.eot?#iefix') format('embedded-opentype'),
    url('/fonts/webfonts/font.woff') format('woff'),
    url('/fonts/webfonts/font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

But, the web fonts are not being loaded in the web site.

After some research I found we need to add the mime type in web.config type for windows server to recognize that format of fonts. Then, I also referenced the mime types in the web.config file as follows:

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

But, it is also not working. Can anyone please let me know, how can we load those fonts.

Owen Blacker · Accepted Answer · 2013-05-14 14:58:34Z

2

So you also need to add a MIME mapping for .eot and .ttf?

The similar block we have in our Web.config files reads:

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

Note that we remove any mappings first, just in case they get configured upstream at some point.

answered May 14, 2013 at 14:58

Owen Blacker

4,1733 gold badges36 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Allen · Accepted Answer · 2022-08-03 21:50:31Z

Other link problems with parameters on url for fontawesome which I saw suggested removing parameters instead of:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), 
  url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),
  url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),
  url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), 
  url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;

use:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'), 
  url('../fonts/fontawesome-webfont.woff2') format('woff2'), 
  url('../fonts/fontawesome-webfont.woff') format('woff'), 
  url('../fonts/fontawesome-webfont.ttf') format('truetype'), 
  url('../fonts/fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

Collectives™ on Stack Overflow

loading web fonts in asp.net website

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related