Will the browser download the font even if it is not used on the page?

Question

It would be easier to develop if I could just embed every font that I would most likely use, but I definitely don't want additional HTTP requests for fonts to get anywhere on the page. Can anyone enlighten me?

Answer 1

IE will download the .eot file immediately when it encounters the @ font-face declaration.

Gecko, Webkit, and Opera wait until they encounter HTML that conforms to the CSS rule with the font, including the @ font-face font.

- http://paulirish.com/2009/fighting-the-font-face-fout/

Likewise, if it weren’t for IE, it would actually be safe to embed a lot of fonts if you don’t reference CSS that you don’t use in your styles, because at that moment they will be loaded by the browser.

Answer 2

Unfortunately, most browsers will not make you guess that you are not downloading fonts that are not actually used (in fact, I don’t know a single browser that is smart enough to avoid this, which of course does not mean browsers may be missing) . Could you send pages during deployment to remove unused ones?

Answer 3

Paul Irish has a really good tutorial on using @ font-face

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

You can also use the syntax generator at fontsquirrel.com

Answer 4

Alternatively, you can do this too: clear your browser’s cache, then launch your browser inspector (right-click> Inpsect) and the Debugger (resources) tab. then enter url and see what loads.