Jquery throwing error on @ font-face

I am working on a project locally and am getting jquery error on my @fontface.

here's my mistake:

jquery-1.11.0.min.js: 2 GET http: // localhost: 9000 / ostrich-regular-webfont.woff2

here's my working directory:

src
| -img
| -scripts
| -styles
     -main.css
     -fonts
          -font files are here
| -index

      

my @ font-face:

@font-face {
font-family: 'ostrich_sansmedium';
src: url('ostrich-regular-webfont.eot');
src: url('ostrich-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('ostrich-regular-webfont.woff2') format('woff2'),
     url('ostrich-regular-webfont.woff') format('woff'),
     url('ostrich-regular-webfont.ttf') format('truetype'),
     url('ostrich-regular-webfont.svg#ostrich_sansmedium') format('svg');
font-weight: normal;
font-style: normal;

      

}

I have tried different variations of the URL, including:

 url('fonts/ostrich-regular-webfont.svg#ostrich_sansmedium'),
 url('styles/fonts/ostrich-regular-webfont.svg#ostrich_sansmedium') 

      

and etc.

Does anyone have any suggestions? Any advice is appreciated!

+3


source to share


1 answer


I see such errors with a lot of font files when IIS is not configured correctly. If you are sure that the file exists (the path looks correct in your attempt to fix), then it may happen that IIS does not know how to serve these files (i.e. they will be 404 because the user cannot load them, because IIS will not serve them). In your file web.config

add the following:

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

      



Obviously, the entry mimeMap

will be inside any of them that already exist, and you must close them. I just included this to help you figure out where it goes.

+2


source







All Articles