@font-face for icons not working in Chrome-Ubuntu

Question

I've recently started using Ubuntu. I installed Chrome from the installer provided on Google's website.

When I started working on my sites, I noticed the icons didn't show. They work fine on Windows and on Firefox (both Windows and Ubuntu).

I used Fontastic to generate the webfonts from SVG files. On Windows I used WAMP and they worked fine. Now I'm using XAMPP. This probably has nothing to do since they don't work on remote servers either. I get no errors or warnings on the console, they simply don't show.

This is an example. I have this @font-face:

@charset "UTF-8";

@font-face {
  font-family: "site-icons";
  src:url("../webfonts/site-icons.eot");
  src:url("../webfonts/site-icons.eot?#iefix") format("embedded-opentype"),
    url("../webfonts/site-icons.woff") format("woff"),
    url("../webfonts/site-icons.ttf") format("truetype"),
    url("../webfonts/site-icons.svg#site-icons") format("svg");
  font-weight: normal;
  font-style: normal;

}

This is the code provided by Fontastic. When I check Chrome's network tab in developer tools, I see this response:

HTTP/1.1 200 OK
Date: Mon, 08 Jun 2015 15:54:08 GMT
Server: Apache/2.4.12 (Unix) OpenSSL/1.0.1m PHP/5.5.24 mod_perl/2.0.8-dev Perl/v5.16.3
Last-Modified: Sun, 15 Jun 2014 02:14:32 GMT
ETag: "adc-4fbd6789d7200"
Accept-Ranges: bytes
Content-Length: 2780
Keep-Alive: timeout=5, max=95
Connection: Keep-Alive

And if i go to the preview tab, I see the fonts just fine!

So why don't they show on the site? This happens ONLY in Chrome/Ubuntu.

The weird part is that if I go to Font Awesome, I see the icons, they work fine: http://fortawesome.github.io/Font-Awesome/

This is their code

/*!
 *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 1

Well I'll be damned. It was AdBlock. AdBlock usually displays a little badge showing how many elements are being blocked on each page. It didn't show anything!

I hadn't noticed these styles being inserted until now:

::content a[title="Connect with us on Twitter"], ::content 
a[title="Connect with us on Youtube"], ::content a[title="Facebook"], 
::content a[title="Fan us on Facebook"], ::content a[title="Follow Me 
on Pinterest"], ::content a[title="Follow Us on Facebook"], ::content 
a[title="Follow Us on Google+"], ::content a[title="Follow Us on 
Pinterest"], ::content a[title="Follow Us on Youtube"], ::content 
a[title="Follow me on Facebook"], ::content a[title="Follow on Google 
Plus"], ::content a[title="Follow our Boards on Pinterest"], ::content 
a[title="Follow us on Facebook!"], ::content a[title="Follow us on 
Google Plus"], ::content a[title="Follow us on Google"], ::content 
a[title="Follow us on Google+"], ::content a[title="Follow us on 
Houzz"], ::content a[title="Follow us on Instagram"], ::content 
a[title="Follow us on Instagram."], ::content a[title="Follow us on 
Linked In"] {
  display: none;
}

::content .icon-circle-instagram, ::content .icon-circle-tumblr, 
::content .icon-circle-twitter, ::content .icon-circle-youtube, 
::content .icon-connect, ::content .icon-delicious, ::content .icon-
digg, ::content .icon-facebook, ::content .icon-facebook-alt, ::content 
.icon-facebook-box, ::content .icon-facebook-circle, ::content .icon-
facebook-circled, ::content .icon-facebook-encircled, ::content .icon-
facebook-round, ::content .icon-facebook-sharing, ::content .icon-
facebook-sign, ::content .icon-facebook-square, ::content .icon-
facebook-squared, ::content .icon-facebook-sticky, ::content .icon-
facebook16 {
  display: none;
}

I assume they come from AdBlock. I've used the classes .icon and .icon-facebook, .icon-twitter, etc. And the selectors also match any a with title="Facebook" or title="Follow us on Facebook"

Disabling AdBlock solved the problem.

Keep in mind that this is only on Chrome on Ubuntu (or any Linux distro, most likely).

I changed the classes, removed the title attributes and they still don't show. And even worse now, there's no visible reason as to why! No warnings (ie: net::ERR_BLOCKED_BY_CLIENT), no "X elements blocked on page", no nothing. So I guess I'll be contacting AdBlock about this.

• EDIT - The AdBlock list responsible for this is: Fanboy's Social Blocking List.

Answer 2

Turning off AdBlock temporarily as suggested in @Nahuel answer and even disabling the extension did not do the job for me.

But, as suggested here, I found that disabling other extensions I had solved the issue. So do test some extensions to see if one of them may be causing the problem

Answer 3

In the Chrome Options / Extensions, disable "Ubuntu unified font style". Webfonts are the displayed correctly.