Le dirham mérite un signe.

<link rel="stylesheet" href="/css/mad-symbol.css">

<span class="price" dir="ltr">
  <span aria-hidden="true">&#xE000;</span>1 500,00
  <span class="sr-only">dirhams marocains</span>
</span>

@font-face {
  font-family: "MAD Symbol";
  src: url("/fonts/mad-symbol-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+E000; /* only the symbol */
}

.price {
  font-family: "MAD Symbol", "Bricolage Grotesque", sans-serif;
  font-variant-numeric: tabular-nums;
  direction: ltr;          /* symbol always left of the digits */
  unicode-bidi: isolate;
}

const SEP = { fr: [" ", ","], en: [",", "."], ar: [".", ","] };

export function formatMAD(amount, lang = "fr") {
  const [group, decimal] = SEP[lang] ?? SEP.fr;
  const [int, dec] = Math.abs(amount).toFixed(2).split(".");
  const num = int.replace(/\B(?=(\d{3})+(?!\d))/g, group) + decimal + dec;
  return (amount < 0 ? "−" : "") + "" + num;
}

formatMAD(1500); // "ꝺ1 500,00"

<span class="price" dir="ltr">
  <svg class="mad" viewBox="0 0 1000 1000" aria-hidden="true">
    <path d="…"/> <!-- mad-v2-regular.svg -->
  </svg>1 500,00
  <span class="sr-only">dirhams marocains</span>
</span>

<style>
  .mad { width: .78em; height: .78em; vertical-align: -.06em; margin-inline-end: .1em; fill: currentColor; }
</style>