/* ==========================================================================
SELF-HOSTED WEB FONTS - Professional Typography System
Beautiful Persian (Vazirmatn) and English (Inter) fonts
Fast loading, privacy-friendly, GDPR compliant
========================================================================== */
/* ==========================================================================
VAZIRMATN - Modern Persian Font Family
https://github.com/rastikerdar/vazirmatn
License: SIL Open Font License 1.1 (Free for all uses)
========================================================================== */
@font-face {
font-family: 'Vazirmatn';
src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0020-007F, U+00A0-00FF;
}
@font-face {
font-family: 'Vazirmatn';
src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0020-007F, U+00A0-00FF;
}
@font-face {
font-family: 'Vazirmatn';
src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0020-007F, U+00A0-00FF;
}
@font-face {
font-family: 'Vazirmatn';
src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+0020-007F, U+00A0-00FF;
}
/* ==========================================================================
INTER - Modern English Font Family
https://github.com/rsms/inter
License: SIL Open Font License 1.1 (Free for all uses)
========================================================================== */
@font-face {
font-family: 'Inter';
src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F;
}
/* ==========================================================================
FONT PRELOADING HINTS
Add these to your for optimal performance:
========================================================================== */
/* ==========================================================================
FONT FEATURE SETTINGS
OpenType features for better typography
========================================================================== */
/* GLOBAL: Apply Vazirmatn to all RTL/Persian content */
html[lang="fa"],
html[dir="rtl"],
body[dir="rtl"],
*[lang="fa"],
*[lang="fa-IR"],
*[dir="rtl"] {
font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Tahoma', 'Arial', sans-serif !important;
font-feature-settings: "liga" 1, "kern" 1, "calt" 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Apply to all text using these fonts */
.vazirmatn-text,
[lang="fa"],
[lang="fa-IR"],
[dir="rtl"] {
font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Tahoma', sans-serif;
font-feature-settings: "liga" 1, "kern" 1, "calt" 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.inter-text,
[lang="en"],
[dir="ltr"] {
font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
font-feature-settings: "liga" 1, "kern" 1, "calt" 1, "cv05" 1, "cv08" 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
FONT LOADING DETECTION
JavaScript can add these classes if fonts fail to load
========================================================================== */
.vazirmatn-loaded {
font-family: 'Vazirmatn', 'Noto Sans Arabic', 'Tahoma', sans-serif;
}
.inter-loaded {
font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
}
.fonts-failed {
font-family: 'Tahoma', 'Segoe UI', 'Arial', sans-serif !important;
}
/* ==========================================================================
NOTES
Font Display Strategy: swap
- Shows text immediately with fallback fonts
- Swaps to web fonts when loaded
- Prevents invisible text (FOIT)
- Great user experience
Unicode Ranges:
- Vazirmatn: Persian, Arabic, Latin characters
- Inter: Latin, Latin Extended, punctuation, symbols
File Sizes:
- Vazirmatn: ~50KB per weight
- Inter: ~111KB per weight
- Total: ~660KB for all weights (very reasonable)
Performance:
- WOFF2 format: Best compression (30% smaller than WOFF)
- font-display: swap: Immediate text rendering
- Served from your domain: No external dependency
- Cached by browser: Fast subsequent loads
Browser Support:
- Chrome 36+, Firefox 39+, Safari 12+, Edge 14+
- 99%+ global browser support
========================================================================== */