Search code examples
cssfont-face

Are @font-face fonts loaded by browser even if not used?

So I have this stack:

 @font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont.ttf') format('truetype');
 }

 body { font-family: Helvetica, MyCustomFont, Arial, sans-serif; }

Is MyCustomFont.tff loaded by browser even if Helvetica is present in the machine (ie: Mac Users)?

Solution

  • You need to use the local directive to test for the locally installed version of the font. If it is not found, the next font in the list will be tested for, and loaded if available. For example:

    @font-face {
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
    local("HelveticaNeue-Bold"),
    url(MgOpenModernaBold.ttf);
    font-weight: bold;
}

    The above example was taken from here:
    https://developer.mozilla.org/en/css/@font-face

    There's some more information here:
    http://www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/

    Once a font has been downloaded, it will be cached by the browser. Once in the cache, it will not be necessary for the browser to download the font again, thereby speeding things up. See here for more information:
    http://code.google.com/apis/webfonts/faq.html#Performance