Browser blocking source rendering

Question

I created custom fonts for icons using IcoMoon, and I’m using the Live Server as a "test server" on a simple website with the following technologies:

• HTML5
• CSS3
• JS VANILLA
• BOOTSTRAP

When testing the icon normally opening the index.html it works without problems, but when testing the icon using the Live Server I get the following error in the console:

GET http://127.0.0.1:5500/fonts/icons/instagramicons.ttf?edyqz0 net::ERR_BLOCKED_BY_CLIENT

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

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'instagramicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-logotype:before {
  content: "\e900";
}

<i class="icon-logotype"></i>

Answer 1

The problem that was occurring was that my extension AdBlock was preventing the fonts from being rendered on my local server with the extension Live Server in the Visual Studio Code.

So to resolve the problem, I simply removed the same running on all my pages from my local server http://127.0.0.1:5500/*.

NOTE

Be careful when using some kind of blocker in your browser, it can bring you several problems under development, like this.