Optimize @font-face generation and loading order for better performance

Problem/Motivation

There are two improvements we should implement regarding font handling in the theme:

1. Dynamic @font-face generation in SASS
The current SASS code in sass/theme/partials/_fonts.scss uses hardcoded keys to generate @font-face declarations. This limits flexibility and makes it difficult to support additional font features, such as variable fonts or custom font-face rules required by the design. Refactoring this logic will allow more scalable and maintainable font configuration.

2. Loading order of @font-face in compiled CSS
The compiled @font-face declarations currently appear at the end of css/theme/theme.css, which is loaded after all other theme CSS files. This delays font availability and may cause a flash of unstyled text (FOUT). To improve rendering performance, @font-face declarations should be placed at the beginning of the CSS output, ensuring fonts are defined before they're used in other style rules.