/* ==========================================================================
Self-Hosted Web Fonts - Performance Optimized
========================================================================== */
/*
* Fraunces - Display Font (Headers, Eyebrows, Special Text)
* License: SIL Open Font License 1.1
* Source: Google Fonts
* Weights used: 300, 600, 700
*/
@font-face {
font-family: 'Fraunces';
src: url('/fonts/fraunces-v24-latin-300.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap; /* Prevents FOIT (Flash of Invisible Text) */
}
@font-face {
font-family: 'Fraunces';
src: url('/fonts/fraunces-v24-latin-600.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Fraunces';
src: url('/fonts/fraunces-v24-latin-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/*
* DM Sans - Body Font (Paragraphs, UI Elements, Navigation)
* License: SIL Open Font License 1.1
* Source: Google Fonts
* Weights used: 400 (regular), 500, 700
*/
@font-face {
font-family: 'DM Sans';
src: url('/fonts/dm-sans-v11-latin-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/fonts/dm-sans-v11-latin-500.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/fonts/dm-sans-v11-latin-700.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
NOTES:
1. Font files should be downloaded to /frontend/fonts/ directory
2. Use font-display: swap to prevent FOIT and improve perceived performance
3. Only .woff2 format used (97%+ browser support, smallest file size)
4. Preload critical fonts in :
Expected Performance Impact:
- FCP improvement: ~500ms
- Eliminates Google Fonts external requests (2-3 network requests)
- Reduces dependency on 3rd party CDN
========================================================================== */