/* ============================================================================ RazhanPro — Typography Base ---------------------------------------------------------------------------- Single source of truth for all fonts on the public site. Font family: IRANYekanX (Pro) v3 — wwwroot/fonts/IRANYekanX(Pro)-3/ Two siblings of the same family are declared: 1. IRANYekanXFaNum — site default. Renders digits as Persian (۱۲۳). 2. IRANYekanX — opt-in via .latin-num, for serial numbers, model codes and e-mail addresses that must stay Latin (123). NOTES FOR MAINTAINERS - The directory name contains parentheses and a space, so every url() below is percent-encoded: ( = %28 ) = %29 space = %20 Un-encoded parentheses inside url() are a CSS syntax error. - Directory casing is exact: "Woff2" / "Woff" are capitalised for the FaNum set (the vendor's own fontiran.css gets this wrong and 404s on Linux). - woff2 is listed BEFORE woff so modern browsers take the smaller file. The vendor CSS lists woff first, which makes every browser download the larger format. - This file must be the LAST stylesheet loaded so it wins the cascade. ========================================================================= */ /* ========================================================================== 1. @font-face — IRANYekanXFaNum (default, Persian digits) ========================================================================== */ @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 100; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-Thin.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-Thin.woff") format("woff"); } @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-UltraLight.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-UltraLight.woff") format("woff"); } @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-Light.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-Light.woff") format("woff"); } @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-Regular.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-Regular.woff") format("woff"); } @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-Medium.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-Medium.woff") format("woff"); } @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-DemiBold.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-DemiBold.woff") format("woff"); } @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-Bold.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-Bold.woff") format("woff"); } @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-ExtraBold.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-ExtraBold.woff") format("woff"); } @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-Black.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-Black.woff") format("woff"); } /* 950 / 1000 are valid in CSS Fonts Level 4 (range 1–1000). Reserved for oversized display headings only. */ @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 950; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-ExtraBlack.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-ExtraBlack.woff") format("woff"); } @font-face { font-family: "IRANYekanXFaNum"; font-style: normal; font-weight: 1000; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff2/IRANYekanXFaNum-Heavy.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Farsi%20numerals/Webfonts/Woff/IRANYekanXFaNum-Heavy.woff") format("woff"); } /* ========================================================================== 2. @font-face — IRANYekanX (Latin digits sibling, opt-in via .latin-num) Same typeface, same metrics; only the numeral glyphs differ. Only 3 weights are shipped to keep the payload small. ========================================================================== */ @font-face { font-family: "IRANYekanXLatinNum"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Webfonts/woff2/IRANYekanX-Regular.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Webfonts/woff/IRANYekanX-Regular.woff") format("woff"); } @font-face { font-family: "IRANYekanXLatinNum"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Webfonts/woff2/IRANYekanX-Medium.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Webfonts/woff/IRANYekanX-Medium.woff") format("woff"); } @font-face { font-family: "IRANYekanXLatinNum"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Webfonts/woff2/IRANYekanX-Bold.woff2") format("woff2"), url("../fonts/IRANYekanX%28Pro%29-3/IRANYekanX%28Pro%29-3/Webfonts/woff/IRANYekanX-Bold.woff") format("woff"); } /* ========================================================================== 3. Design tokens --heading-font / --body-font intentionally reuse the names already referenced throughout wwwroot/common/css/common_style.css, so every existing `font-family: var(--heading-font)` rule inherits the new font without editing that 215 KB vendor file. ========================================================================== */ :root { --font-fa: "IRANYekanXFaNum", "Segoe UI", Tahoma, sans-serif; --font-latin-num: "IRANYekanXLatinNum", "Segoe UI", Tahoma, sans-serif; /* Consumed by the Sasly vendor theme — do not rename. */ --heading-font: var(--font-fa); --body-font: var(--font-fa); /* The admin theme (loaded by _LayoutAuthentication for the public Login/Register pages) applies var(--poppins) to body, h1-h6 and p. 'Poppins' is never actually loaded anywhere in this project, so it was silently falling back to system sans-serif. Repointing it here fixes those public pages. typography.css is not linked from _LayoutAdmin, so the admin panel itself is unaffected. */ --poppins: var(--font-fa); /* Weight scale */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-demibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; } /* ========================================================================== 4. Global application Only font-family / font-weight are set here. Font SIZES are deliberately left to the existing stylesheets so this change cannot reflow the 12 pages that already ship. ========================================================================== */ html, body { font-family: var(--font-fa); font-weight: var(--fw-regular); } /* Form controls and buttons do not inherit font by default in any browser. */ input, textarea, select, button, optgroup, .form-control, .form-select { font-family: var(--font-fa); } /* ========================================================================== 5. Typography hierarchy ========================================================================== */ /* Main titles and section headings — ExtraBold / Bold */ h1, .h1 { font-family: var(--font-fa); font-weight: var(--fw-extrabold); } h2, .h2 { font-family: var(--font-fa); font-weight: var(--fw-extrabold); } h3, .h3 { font-family: var(--font-fa); font-weight: var(--fw-bold); } /* Sub-headings and interactive elements — Medium */ h4, .h4, h5, .h5, h6, .h6 { font-family: var(--font-fa); font-weight: var(--fw-medium); } .btn, .theme-btn, button, [type="button"], [type="submit"], .nav-link, .main-menu a, label, .widget-title { font-family: var(--font-fa); font-weight: var(--fw-medium); } /* Body copy — Regular */ p, span, li, td, th, blockquote, figcaption, .card-text, .lead { font-family: var(--font-fa); font-weight: var(--fw-regular); } /* Emphasis inside body copy — DemiBold reads better than the browser's synthetic bold at Persian text sizes. */ strong, b { font-weight: var(--fw-demibold); } /* Captions, fine print and footers — Light */ small, .small, figcaption, .caption, .text-muted, .copyright-text, .copyright-text p, .footer-copyright, .footer-copyright p, .form-text, .blockquote-footer { font-family: var(--font-fa); font-weight: var(--fw-light); } /* ========================================================================== 6. Utilities ========================================================================== */ /* Opt back into Latin digits — use on serial numbers, model codes, e-mails. e.g. RZ-48812 -> RZ-48812 (not RZ-۴۸۸۱۲) */ .latin-num { font-family: var(--font-latin-num) !important; } /* Weight helpers */ .fw-light { font-weight: var(--fw-light) !important; } .fw-regular { font-weight: var(--fw-regular) !important; } .fw-medium { font-weight: var(--fw-medium) !important; } .fw-demibold{ font-weight: var(--fw-demibold) !important; } .fw-bold { font-weight: var(--fw-bold) !important; } .fw-extrabold { font-weight: var(--fw-extrabold) !important; } .fw-black { font-weight: var(--fw-black) !important; } /* Legacy class names kept alive so existing markup keeps working. They previously pointed at 'anic', 'Vazir' and 'IranSans'. */ .text-en { font-family: var(--font-latin-num); font-weight: var(--fw-regular); } .text-bold { font-family: var(--font-fa); font-weight: var(--fw-bold); } /* ========================================================================== 7. Icon fonts — intentionally NOT touched Font Awesome Pro 5.14 declares its own families via class selectors (.fa/.fas/.far/.fal = "Font Awesome 5 Pro", .fab = "Font Awesome 5 Brands", .fad = "Font Awesome 5 Duotone"). A class selector (0,1,0) outranks the element selectors used above (0,0,1), so icons keep their glyph font with no extra rules needed. Do NOT add a blanket [class*="fa-"] override here: it would collapse Brands and Duotone into the solid Pro family and break those icons. ========================================================================== */