Why won’t fonts load correctly if the `@font-face` rules are not added to the top of the stylesheet?


#1

Question

Why won’t fonts load correctly if the @font-face rules are not added to the top of the stylesheet?

Answer

@font-facerules can actually be placed anywhere within a style sheet and there are no official guidelines surrounding it’s placement. However, for organizational and conventional reasons, it is usually recommended that@font-face` be placed at the top of a style sheet.


#2

General reading:

At-rule - CSS

As described above, most @ rules can be nested, save for the three listed at the top (@charset, @import, @namespace). Those may only be written at top of the stylesheet and are never nested.