Fonts

Sooquna has no hosted font library yet: ship your fonts in assets/ and declare them yourself. The font_picker setting and the font_face, font_url and font_modify filters are accepted so Shopify themes upload, but they output nothing.

Self-host with @font-face

snippets/css-variables.liquid

{%- style -%}
  @font-face {
    font-family: "Geist";
    src: url("{{ 'geist-latin-wght-normal.woff2' | asset_url }}") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
  }
  @font-face {
    font-family: "Plex Arabic";
    src: url("{{ 'ibm-plex-sans-arabic-arabic-400-normal.woff2' | asset_url }}") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC;
  }
  :root { --font-body: "Geist", "Plex Arabic", system-ui, sans-serif; }
{%- endstyle -%}

• WOFF2 only: every browser that matters supports it.
• unicode-range splits Latin and Arabic: an English page never downloads the Arabic file, and the browser picks the right font per character, so mixed text works.
• font-display: swap shows text at once in a fallback font.
• Preload only the first-screen file of the page’s script: Latin on English pages, Arabic on Arabic pages.

{%- if request.locale.direction == 'rtl' -%}
  <link rel="preload" href="{{ 'ibm-plex-sans-arabic-arabic-400-normal.woff2' | asset_url }}" as="font" type="font/woff2" crossorigin>
{%- endif -%}

Letting merchants choose

Offer a select of the fonts you ship, and switch a CSS variable:

{ "type": "select", "id": "heading_font", "label": "Heading font", "default": "sans",
  "options": [{ "value": "sans", "label": "Sans" }, { "value": "serif", "label": "Serif" }] }

Arabic font guidance

• Pick an Arabic family with weights that match your Latin font: IBM Plex Sans Arabic, Noto Sans Arabic, Tajawal, Cairo and Almarai all pair well with modern sans serifs.
• Arabic needs more line height than Latin: 1.7–1.9 for body text.
• Don’t use letter-spacing on Arabic: it breaks the joins between letters. Reset it on [dir="rtl"].
• Don’t fake bold or italic: ship the weights you use, and avoid italic for Arabic altogether.
• Keep Arabic at the same or a slightly larger size than Latin; many Arabic fonts look small at the same font-size.

See RTL and Arabic typography for layout.