/** * Per-language typography. * * WPML sets the attribute on every page, so the language is * selected in CSS alone — no PHP branching and no layout shift. * * English (and any non-Arabic language) keeps the existing Onest font. * Arabic switches to Tajawal. * * @package Astra Child */ /* --------------------------------------------------------------------------- * Tajawal — Arabic UI font (self-hosted, no external request) * ------------------------------------------------------------------------ */ @font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Tajawal'; src: url('../fonts/Tajawal-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------------- * Language-scoped font stacks * ------------------------------------------------------------------------ */ /* * The stack is exposed as a variable so any component can inherit it rather * than hardcoding a family name. */ :root { --ue-font-latin: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --ue-font-arabic: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; --ue-font-body: var(--ue-font-latin); } /* * Arabic. The attribute selector matches "ar" and every regional variant * (ar-SA, ar-EG, ...), which is how WPML writes the tag. */ html[lang="ar"], html[lang^="ar-"] { --ue-font-body: var(--ue-font-arabic); } /* * Apply the active stack. Headings, buttons and form controls are listed * explicitly because browsers and themes often set their own families there. */ html[lang="ar"] body, html[lang^="ar-"] body, html[lang="ar"] h1, html[lang^="ar-"] h1, html[lang="ar"] h2, html[lang^="ar-"] h2, html[lang="ar"] h3, html[lang^="ar-"] h3, html[lang="ar"] h4, html[lang^="ar-"] h4, html[lang="ar"] h5, html[lang^="ar-"] h5, html[lang="ar"] h6, html[lang^="ar-"] h6, html[lang="ar"] p, html[lang^="ar-"] p, html[lang="ar"] a, html[lang^="ar-"] a, html[lang="ar"] li, html[lang^="ar-"] li, html[lang="ar"] span, html[lang^="ar-"] span, html[lang="ar"] button, html[lang^="ar-"] button, html[lang="ar"] input, html[lang^="ar-"] input, html[lang="ar"] select, html[lang^="ar-"] select, html[lang="ar"] textarea, html[lang^="ar-"] textarea, html[lang="ar"] .site-title, html[lang^="ar-"] .site-title, html[lang="ar"] .menu-item, html[lang^="ar-"] .menu-item { font-family: var(--ue-font-arabic); } /* * Latin text deliberately kept in Onest even on Arabic pages: brand names such * as "Dassault Systèmes" render better in their own typeface. Wrap such text in * or rely on where the markup already isolates it. */ html[lang="ar"] .lang-latin, html[lang^="ar-"] .lang-latin { font-family: var(--ue-font-latin); }