feat: add local Inter font fallback for offline support
Add self-hosted Inter font files to ensure application works offline
and reduce dependency on external CDN (Google Fonts).
Problem:
- Google Fonts (fonts.googleapis.com) fails when no internet connection
- Application shows NS_ERROR_UNKNOWN_HOST errors
- Font rendering falls back to system fonts, breaking design consistency
Solution:
- Download Inter font files (weights 400, 500, 600, 700, 800) from Google Fonts
- Host locally in static/shared/fonts/inter/
- Create inter.css with @font-face declarations
- Update all templates to load local fonts FIRST, then Google Fonts as fallback
Files Added:
- static/shared/fonts/inter.css (font-face declarations)
- static/shared/fonts/inter/inter-400.ttf (318KB - Regular)
- static/shared/fonts/inter/inter-500.ttf (318KB - Medium)
- static/shared/fonts/inter/inter-600.ttf (319KB - Semi-bold)
- static/shared/fonts/inter/inter-700.ttf (319KB - Bold)
- static/shared/fonts/inter/inter-800.ttf (320KB - Extra-bold)
Templates Updated (7 files):
- app/templates/admin/base.html
- app/templates/admin/login.html
- app/templates/vendor/base.html
- app/templates/vendor/login.html
- app/templates/shop/account/login.html
- app/templates/shop/account/register.html
- app/templates/shop/account/forgot-password.html
Font Loading Strategy:
1. Load local fonts first (always available, fast)
2. Load Google Fonts second (better quality when online)
3. Browser uses first available source
Example change:
Before:
<link href="https://fonts.googleapis.com/css2?family=Inter..." />
After:
<link href="/static/shared/fonts/inter.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter..." />
Benefits:
- ✅ Works offline without font loading errors
- ✅ Faster initial load (local fonts, no DNS lookup)
- ✅ Reduced external dependencies
- ✅ Consistent typography even when CDN is down
- ✅ Still uses Google Fonts when available (higher quality)
- ✅ Total size: ~1.6MB (reasonable for 5 font weights)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
46
static/shared/fonts/inter.css
Normal file
46
static/shared/fonts/inter.css
Normal file
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* Inter Font - Local Fallback
|
||||
*
|
||||
* This file provides local font files as fallback when Google Fonts is unavailable.
|
||||
* Works offline and reduces external dependencies.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/static/shared/fonts/inter/inter-400.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url('/static/shared/fonts/inter/inter-500.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url('/static/shared/fonts/inter/inter-600.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('/static/shared/fonts/inter/inter-700.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url('/static/shared/fonts/inter/inter-800.ttf') format('truetype');
|
||||
}
|
||||
BIN
static/shared/fonts/inter/inter-400.ttf
Normal file
BIN
static/shared/fonts/inter/inter-400.ttf
Normal file
Binary file not shown.
BIN
static/shared/fonts/inter/inter-500.ttf
Normal file
BIN
static/shared/fonts/inter/inter-500.ttf
Normal file
Binary file not shown.
BIN
static/shared/fonts/inter/inter-600.ttf
Normal file
BIN
static/shared/fonts/inter/inter-600.ttf
Normal file
Binary file not shown.
BIN
static/shared/fonts/inter/inter-700.ttf
Normal file
BIN
static/shared/fonts/inter/inter-700.ttf
Normal file
Binary file not shown.
BIN
static/shared/fonts/inter/inter-800.ttf
Normal file
BIN
static/shared/fonts/inter/inter-800.ttf
Normal file
Binary file not shown.
Reference in New Issue
Block a user