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

Created on 3 August 2025, 3 days ago

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.

Feature request
Status

Active

Version

2.0

Component

BS Base

Created by

🇷🇸Serbia pivica

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024