Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Will a browser download a font-face even if it is not used in the page?

It would be easier for development if I can just embed every typeface I'm likely to use, but I definitely don't want the extra HTTP requests for fonts that don't end up anywhere in the page. Can anyone enlighten me?

like image 360
Logan Koester Avatar asked Apr 28 '10 04:04

Logan Koester


People also ask

How do browser fonts work?

Essentially, a browser looks at each sequence of fonts as first font choice, second font choice, third font choice, and so on. If a browser is unable to find any of the fonts in the sequence it will revert to a default serif, sans serif, or monospace font, depending on the font classification used.

What is font-face use for?

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.

How do you stop a font importing in CSS?

#Method 1: By combining CSS files This means you can simply copy and paste the files you were importing, directly into the original file. This will remove the need to import the file. Another way is that you can add a separate link in the header of HTML instead of adding CSS@import.


1 Answers

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

Gecko, Webkit, and Opera all wait until they encounter HTML that matches a CSS rule with a fontstack including the @font-face font.

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

So were it not for IE, it actually would be safe to embed lots of fonts, as long as you're careful not to refer to unused ones in your CSS styles, because at that point they will be downloaded by the browser.

like image 126
Logan Koester Avatar answered Jan 22 '23 23:01

Logan Koester