44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
/**
|
|
* Font Loading Utility
|
|
* Ensures fonts are loaded before showing content to prevent FOUT/FOIT
|
|
*/
|
|
|
|
/**
|
|
* Preload fonts asynchronously
|
|
* Uses the Font Loading API to ensure Inter font is loaded
|
|
* Falls back to system fonts on error
|
|
*/
|
|
export const preloadFonts = async () => {
|
|
if ('fonts' in document) {
|
|
try {
|
|
await document.fonts.load('1em Inter');
|
|
document.documentElement.classList.add('fonts-loaded');
|
|
} catch (err) {
|
|
console.warn('Font loading failed:', err);
|
|
// Fallback to system fonts
|
|
document.documentElement.classList.add('fonts-fallback');
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Initialize font loading process
|
|
* Should be called as early as possible in the application lifecycle
|
|
* Adds loading state and fallback timeout to prevent indefinite loading
|
|
*/
|
|
export const initializeFonts = () => {
|
|
// Add loading class immediately
|
|
document.documentElement.classList.add('fonts-loading');
|
|
|
|
// Start font loading
|
|
preloadFonts();
|
|
|
|
// Remove loading class after a timeout to prevent indefinite loading state
|
|
setTimeout(() => {
|
|
document.documentElement.classList.remove('fonts-loading');
|
|
if (!document.documentElement.classList.contains('fonts-loaded')) {
|
|
document.documentElement.classList.add('fonts-fallback');
|
|
}
|
|
}, 3000);
|
|
};
|