font face causes performance issues

When my site loads there is a freeze of a few seconds before the browser displays text that is rendered with font face (text with arial font gets displayed immediately).

I've been getting complaints from users that experience a freeze of up to 10 seconds.

What can I do about that?

here is how I insert the font face:

@font-face{
    font-family:'GillSans';
    src:url('../fonts/GIL_____.eot');
    src:url('../fonts/GIL_____.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GIL_____.woff') format('woff'),
        url('../fonts/GIL_____.ttf') format('truetype'),
        url('../fonts/GIL_____.svg#GillSans') format('svg');
}
@font-face{
    font-family:'GillSansB';
    src:url('../fonts/GILB____.eot');
    src:url('../fonts/GILB____.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GILB____.woff') format('woff'),
        url('../fonts/GILB____.ttf') format('truetype'),
        url('../fonts/GILB____.svg#GillSansB') format('svg');
}
@font-face{
    font-family:'GillSansBI';
    src:url('../fonts/GILBI___.eot');
    src:url('../fonts/GILBI___.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GILBI___.woff') format('woff'),
        url('../fonts/GILBI___.ttf') format('truetype'),
        url('../fonts/GILBI___.svg#GillSansBI') format('svg');
}
@font-face{
    font-family:'GillSansI';
    src:url('../fonts/GILI____.eot');
    src:url('../fonts/GILI____.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GILI____.woff') format('woff'),
        url('../fonts/GILI____.ttf') format('truetype'),
        url('../fonts/GILI____.svg#GillSansI') format('svg');
}

Solution

Try compressing and caching your fonts. If you use Apache, you can configure this using .htaccess

Here is a very helpful overview from the performance guru Steve Sounders

Additional info and resources

Assuming you use Apache and the modules mod_expires and mod_deflate are enabled, you can add the following rules to your .htaccess

<IfModule mod_expires.c>
  Header set cache-control: public
  ExpiresActive on

  ExpiresByType font/ttf      "access plus 1 month"
  ExpiresByType font/woff     "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
</IfModule>

<IfModule mod_deflate.c>
  <FilesMatch "\.(ttf|otf|eot|svg)$" >
    SetOutputFilter DEFLATE
  </FilesMatch>
</IfModule>

After adding the above to .htaccess, observe the relevant header fields to verify.

Should you be interested in learning more, check out speed tips for cache control, and compression.