Search code examples
browsercssfontsfont-face

Do browsers download unnecessary files in @font-face statements?

I would like to choose fonts in a web page using logic along the lines of "if you have this system font A, use it, otherwise download and use font B".

I can do this in CSS like so:

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

p {
  font-family: A, B;
}

My question is: If the system has font A installed (i.e. font B is never actually required to render the document), is B.ttf downloaded or not - and does it vary between browsers?

Solution

  • The file B.ttf may be requested, even if font A is available on the system and the browser doesn't need to fall back to font B.

    Paraphrased from the CSS3 Fonts module spec, §4.7 Font loading guidelines, with a relevant code snippet:

    In cases where a font might be downloaded in character fallback cases, user agents may download a font if it's listed in a font list but is not actually used for a given text run.

    @font-face {
  font-family: GeometricModern;
  src: url(font.ttf);
}

h2 {
  /* font may be downloaded for pages with h2 elements,
     even if Futura is available locally */
  font-family: Futura, GeometricModern, sans-serif;
}

    Since it's not a requirement (i.e. "may", not "must"), it's the vendor's choice whether their browser downloads a web font for fallback use even if it's not required. As far as I know, Firefox will download B.ttf, and it appears that Safari and Google Chrome won't (I haven't even tested in Opera and IE yet).

    So, it looks like this behavior varies between browsers — but there's no right or wrong in such a scenario.