/* ============================================================================= arabic-face.css -- Tajawal for Arabic, Roboto kept for Latin ============================================================================= Loaded only when the active locale's direction is rtl, so the English document is byte-identical to what it served before this file existed. WHY THE FAMILY IS CALLED "Roboto" HERE, WHICH LOOKS WRONG AND IS NOT The built stylesheet, and an inline override in the shop layout, both set * { font-family: Roboto, sans-serif; } on the universal selector. Every element on the site therefore resolves to a stack whose first name is Roboto -- the ~29 explicit `font-family: Roboto, sans-serif` rules included, and the 121 `font-family: inherit` rules by inheritance. Changing that stack to name Tajawal would mean editing the Vite source and rebuilding the bundle, which rewrites every asset hash on the site, plus every explicit rule in both themes, and any rule written after today would silently miss Arabic again. Registering additional faces for an EXISTING family, distinguished only by unicode-range, is the mechanism the spec provides for exactly this, and it is what Google Fonts itself does: their Roboto is a dozen @font-face blocks differing only in unicode-range (latin, latin-ext, cyrillic, greek, vietnamese). Google's Roboto has NO Arabic subset, so these three faces add coverage the family did not have and overlap nothing. The effect is per character, which is the requirement: Arabic characters -> in range -> Tajawal Latin characters -> not in any range here -> Google's Roboto So a Latin make, model, price or phone number sitting inside Arabic copy still renders in Roboto without any markup saying so. That is why this is a unicode-range job and not a `:lang(ar)` or `[dir=rtl]` font override, either of which would have dragged the Latin fragments into Tajawal too. WEIGHTS 400, 500 and 700, matching the three Roboto weights the layout requests. Nothing else is loaded. A missing weight would be synthesised by the browser, and synthetic emboldening of Arabic script looks conspicuously wrong -- strokes thicken across joins that should stay thin. font-display: fallback, NOT swap Because every visible glyph on an Arabic page is in this font, `swap` would repaint and reflow the entire page when it arrives. `fallback` gives a ~100ms block window, which a 9KB same-origin woff2 beats almost always, so in practice there is no flash at all; and if the network is slow the text still appears in a fallback face rather than staying invisible. `optional` was rejected: it lets the browser skip the font altogether, and the client chose this typeface. The files are self-hosted rather than fetched from Google, so the Arabic face costs no extra DNS or TLS handshake and does not put visitor IPs in front of a third party on a site that ships a GDPR feature. ============================================================================= */ /* Arabic, Arabic Supplement, Arabic Extended-A/B/C, and the two Presentation Forms blocks. Google's own Tajawal range additionally claims U+200C-200E, U+2010-2011, U+204F and U+2E41 -- zero-width joiners, marks and dashes shared with Latin text. Those are deliberately EXCLUDED: they occur on English pages, and including them would make an English page download an Arabic font and render its hyphens from it. */ @font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: fallback; src: url("fonts/tajawal-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: fallback; src: url("fonts/tajawal-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: fallback; src: url("fonts/tajawal-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* ----------------------------------------------------------------------------- The same three faces again, under their real name. ----------------------------------------------------------------------------- Needed for stacks that do NOT lead with Roboto and so never reach the registration above. The insurance sandbox is one: its stack is `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ...`, where three system families sit ahead of Roboto and would answer for Arabic first. Prepending an Arabic-only family to a stack is a provably Latin-neutral edit -- no Latin codepoint falls in the ranges below, so Latin resolution continues to the next family exactly as before, and on a page where this stylesheet is not loaded the name is simply unknown and skipped. Same URLs as above, so the browser downloads each file once. This costs CSS bytes, not font bytes. It also gives anyone writing new Arabic-only rules an honest name to ask for. -------------------------------------------------------------------------- */ @font-face { font-family: Tajawal; font-style: normal; font-weight: 400; font-display: fallback; src: url("fonts/tajawal-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: Tajawal; font-style: normal; font-weight: 500; font-display: fallback; src: url("fonts/tajawal-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: Tajawal; font-style: normal; font-weight: 700; font-display: fallback; src: url("fonts/tajawal-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }