net::ERR_ABORTED 404 (Not Found) - Error in console

Question

After uploading my wordpress website to live server i am getting error in console about my fonts not found. Due to which mobirise icons are not loaded.

Both files are present in that font folder. Please look into the picture.

I am importing these fonts with these css code in style.css

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

Can anyone tell me why i am getting this error. Is this error related to my hosting?

Answer 1

I found the answer myself.

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

In above code i am using Mobirise with capital M whereas the file name is with small m which can be seen in above screenshot.

Answer 2

If there is no error no the path then it could be a permission as is stated here: https://stackoverflow.com/a/43910775/6737468

Answer 3

You need to register your fonts in web.config (system.webServer\staticContent).

<remove fileExtension=".eot"/>
<remove fileExtension=".woff2"/>

<mimeMap fileExtension=".woff2" mimeType="font/woff2"/>
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject"/>
<mimeMap fileExtension=".otf" mimeType="font/otf"/>
<mimeMap fileExtension=".woff" mimeType="font/x-woff"/>