Question

I’m using @font-face on my website as well as Typekit. The reason i’m using both is because i use @font-face for icons and Typekit doesnt provide any fonts of this nature. I created my Icon Font with the awesome tool that is IcoMoon App.

After spending several hours sifting through my stylesheets and js files i learned that when @font-face was present in my stylesheet then on some Windows7 Machines using Firefox or Internet Exporer (latest versions) the browser will hang for a while or in some cases crash and then restart. After this happens the website works just fine.

Anyone have any ideas on how i can prevent this from happening?

Below is my @font-face code from my stylesheet, and here is the website i’m using it on.

Thank you in advance!!

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

Note: I’m perfectly open to suggestions and fixes with Jquery if there are any!

Answer 1

The problem appears to be directly with the IcoMoon App. After creating my Icon Font with IcoMoon i uploaded the ttf file with Font Squirrel’s own generator and low and behold no browsers crashed and page load speed was 10x faster!