only load @font-face being used in that page

Question

I have multiple @font-face fonts in my stylesheet, is there a way of only load the ones being used on that page? Other than loading a separate stylesheet for each page that features that font.

Answer 1

I don't know how browsers are really implementing it, but CSS Fonts Module Level 3 says in its "Font loading guidelines" section, that browsers must download only the fonts that are used in the current page:

The @font-face rule is designed to allow lazy loading of fonts, fonts are only downloaded when needed for use within a document. A stylesheet can include @font-face rules for a library of fonts of which only a select set are used; user agents must only download those fonts that are referred to within the style rules applicable to a given page. User agents that download all fonts defined in @font-face rules without considering whether those fonts are in fact used within a page are considered non-conformant.

So, anyway, in your code you can't specify any specific behavior, and if the browser is compliant, it will download only the ones required for each page.

Another consideration is if browsers will download fonts declared in the current page as a fallback but not really used. In this case, the specification says it is optional:

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.