/* * Vitalink Mesotech Skin — Web font declarations * ------------------------------------------------------------------ * Default family: Vazirmatn (OFL — free for commercial use, license-safe). * * HOW TO USE YOUR OWN FONT FILES * 1. Drop the font files into: assets/fonts/ * 2. Match the file names below, OR edit the src: url() lines to match * whatever you uploaded. * 3. If you switch to a different family (e.g. IRANSansX or Yekan Bakh — * note: those require a paid commercial license), just: * - change the font-family name in each @font-face below, and * - change --vlk-font in assets/css/brand.css to the new name. * * Expected files (woff2 preferred, woff fallback): * Vazirmatn-Light.woff2 (300) * Vazirmatn-Regular.woff2 (400) * Vazirmatn-Medium.woff2 (500) * Vazirmatn-SemiBold.woff2 (600) * Vazirmatn-Bold.woff2 (700) * * font-display: swap keeps text visible while the font loads. * ------------------------------------------------------------------ */ @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Vazirmatn-Light.woff2") format("woff2"), url("../fonts/Vazirmatn-Light.woff") format("woff"); } @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"), url("../fonts/Vazirmatn-Regular.woff") format("woff"); } @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2"), url("../fonts/Vazirmatn-Medium.woff") format("woff"); } @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2"), url("../fonts/Vazirmatn-SemiBold.woff") format("woff"); } @font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"), url("../fonts/Vazirmatn-Bold.woff") format("woff"); } /* ================================================================== * OPTIONAL: display font for HEADINGS (font pairing) * ------------------------------------------------------------------ * Mesotech itself uses one family, so this is OFF by default. To give * headings extra character (nice for the beauty side): * 1. Upload the heading-font files into assets/fonts/ * 2. Uncomment the @font-face block below (fix names if needed) * 3. In brand.css set: --vlk-font-heading: "Morabba", var(--vlk-font); * * Example uses "Morabba" (a Persian display face). Swap for any family * you license/choose. Vazirmatn + Morabba are both OFL / license-safe. * * @font-face { * font-family: "Morabba"; * font-style: normal; * font-weight: 700; * font-display: swap; * src: url("../fonts/Morabba-Bold.woff2") format("woff2"), * url("../fonts/Morabba-Bold.woff") format("woff"); * } * @font-face { * font-family: "Morabba"; * font-style: normal; * font-weight: 500; * font-display: swap; * src: url("../fonts/Morabba-Medium.woff2") format("woff2"), * url("../fonts/Morabba-Medium.woff") format("woff"); * } * ================================================================== */ /* ================================================================== * MENA / multilingual — Latin & Arabic brand fonts (added v1.7.0) * ------------------------------------------------------------------ * Free, OFL, self-hosted (drop the woff2 files into assets/fonts/): * English / Latin : IBM Plex Sans * Arabic : IBM Plex Sans Arabic * Persian : Vazirmatn (declared above) * * Expected files (woff2), weights 300/400/500/600/700: * IBMPlexSans-Light/Regular/Medium/SemiBold/Bold.woff2 * IBMPlexSansArabic-Light/Regular/Medium/SemiBold/Bold.woff2 * * The per-language mapping at the bottom switches --vlk-font based on the * set by the skin's Language layer, so the whole site (and every * Vitalink plugin that uses var(--vlk-font)) follows the visitor's language. * ================================================================== */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/IBMPlexSans-Light.woff2") format("woff2"), url("../fonts/IBMPlexSans-Light.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"), url("../fonts/IBMPlexSans-Regular.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"), url("../fonts/IBMPlexSans-Medium.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"), url("../fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2"), url("../fonts/IBMPlexSans-Bold.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/IBMPlexSansArabic-Light.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Light.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype"); } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"), url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype"); } /* Per-language font families. --vlk-font (defined in brand.css) is overridden * by , which the Language layer sets to en | fa | ar. */ :root { --vlk-font-en: "IBM Plex Sans", "Segoe UI", Arial, sans-serif; --vlk-font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; --vlk-font-fa: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif; } html[lang="en"] { --vlk-font: var(--vlk-font-en); } html[lang="ar"] { --vlk-font: var(--vlk-font-ar); } html[lang="fa"] { --vlk-font: var(--vlk-font-fa); }