Where to put font-face in CSS?

Question

When you add @font-face into your site's single css file where is the best place to put it? Top of the css file? Bottom?

If you put it at the top I would think it would slow down the loading of the css. If you add to the bottom then all the text would load the fall back fonts until the fonts were loaded which wouldn't be optimal either. So when using @font-face and not TypeKit, GoogleFonts, etc, where should you put it?

*Update - To reaffirm the above this is in reference to where to put "@font-face{font-family:'Ave Regular';src:url('fonts/ave-regular.eot?#iefix')....etc" in the css file, not where to put the body "{ font-family: fontname, arial, serif } etc". And that I understand it "can" go anywhere and work, and whether I put at top or bottom or in the middle won't make "much" of a difference but looking for which is better no matter how marginally or if it one way is better depending on certain use cases.

Answer 1

If you put it at the top I would think it would slow down the loading of the css.

No, it does not. The browser isn't going to wait to download the fonts first before loading the rest of your stylesheet. It'll start downloading the fonts asynchronously, but those font downloads don't interfere with anything but page rendering (see FOUT).

If you meant to say that having the rules at the top would slow it down because the browser has to download the rules first before the rest of your stylesheet, that really doesn't matter unless you have tens of kilobytes of @font-face rules (very, very, very unlikely).

There are no rules governing where to place @font-face in a stylesheet, but I generally keep most at-rules at the top for organizational purposes.