Font on React app not found when deployed on azure web app

Question

I've been trying since the morning to deploy my simple react app on azure, everything is loaded perfectly except the FONTS ! here's what i get in the console

 Failed to load resource: the server responded with a status of 404 (Not Found)
 CircularStd-Bold.5c4514a8399ec0064b9b.otf

when i access the link of the font i get a page with the following error

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

i read thousands of articles i did add my web.config file to the public folder, with the following code :

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
        <staticContent>
             <mimeMap fileExtension=".otf" mimeType="font/otf" />
        </staticContent>
    </system.webServer>
</configuration>

WHAT AM I DOING WRONG PLEASE?

Answer 1

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

This error indicates that the file you're looking for isn't on the server, or that the web.config file isn't set up correctly.

• For all font files, make sure the Build Action property is set to Content.
• Modify the setting in web.config file as below

<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".otf" />    
      <mimeMap fileExtension=".otf" mimeType="font/opentype" />     
    </staticContent>
    </system.websServer>
  </configuration>

OR

<system.webServer>
  <staticContent>
    <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
    <remove fileExtension=".otf" />   
    <mimeMap fileExtension=".otf" mimeType="application/x-font-otf" />
  </staticContent>
  <modules>

OR

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

The important parts of the example above are the and tags for font files.

• Ensure that web.config and font files has been deployed ,and web.config is located in the root directory.

Please refer Link1 and Link2 for more information

Answer 2

Here's an the wwwroot folder after adding the webconfig file and the fonts present in the static file