Font-face don't display well

Question

I have a wordpress site here http://itrain.com.my/v3/ as my Home Page

I am wondering why it is not displaying well in Firefox?

Anyone who is good in css?

By the way, try to look at the subpages http://www.itrain.com.my/v3/index.php/about-us/

it display well.

I am really wondering why does it happening.

Any can help me? Any suggestion, recommendations?

Answer 1

I would wager you have the font installed on your local machine. I don't see it on any browser. Instead, I get two 404 errors.

In other words: please make sure the font files are available at the locations their respective locations: http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/big_noodle_titling-webfont.woff and http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/bebas__-webfont.woff.

[EDIT]

I've just looked at the fonts directory listing on your site. The ttf and eot versionf of your fonts are available, the woff and svg are listed, but result in a 404 error. Furthermore, the ttf version (downloaded instead of woff in Firefox, after getting a 404) seems to generate an empty HTTP response.

So... Make sure the fonts are there, make sure they have proper privileges set (like 0644). I can't see any other issues than the font files themselves as the CSS appears to be correct.

[EDIT 2]

@kubedan provides a great tip that seems to fit your concern about the htaccess: the domain the fonts are downloaded from is always preceded with www. Firefox will refuse to download such content, you need to use the same domain.

Answer 2

I think problem is with URL. It work http://www.itrain.com.my/v3/ but doesnt work on http://itrain.com.my/v3/

Set on your server redirection (301) from non-www URL to www URL.