csssassfontsarabicligature

Ligatures not displaying on website but fine on Google Fonts

My website is trying to display the letters "ل" and "ا", together they typically become "لا"

However, my website (hugo static site) is not rendering the ligature as I would expect,

WebsitePreview

or as I myself would see from Google Fonts

GoogleFontPreview

The code for my website's CSS is here: https://github.com/adehad/dhikr-hub/blob/d58c4e38299983676217e382774cae137d4a980e/site/assets/_custom.scss#L21

The website URL with an example is here: https://adehad.github.io/dhikr-hub/qasidas/al-mashrab_al-ahna/#30

I obtained the woff files using https://gwfh.mranftl.com/fonts/scheherazade-new?subsets=arabic,latin But I had the same results when using the ones provided by the font creator (from the About page on the Google fonts link).

I have tried forcing ligatures to be enabled, but still have the same results

font-feature-settings: "liga" 1;
font-variant-ligatures: normal;

I have tried Firefox and Chromium based browsers, both seeing the same result. Which aligns with a configuration issue with my side, especially as the font also works with the Google Font preview.

Is there a possibility that some build step in the hugo process is affecting the fonts? They are using Dart SASS, but I am not fully aware if that is significant.

Any further advice on why this ligature is not being applied, and what further options I might have?

I am struggling to producing reproducible example. My attempt below made by copying the HTML generated by hugo, then recreating the relevant CSS as either inline styles or inline CSS in a single HTML displays correctly on my end.

Example below now reproduces

<html lang="en-us" dir="ltr"
    style="--arabic-font-perc: 253%; --transliteration-font-perc: 80%; --translation-font-perc: 85%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta property="og:locale" content="en_us">
    <meta property="og:type" content="article">

    <!-- Google Fonts Direct Import -->
    <!--
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;500;600;700&display=swap"
        rel="stylesheet">
    -->

    <!-- Equivalent to Wesbite -->
    <style>
        :root {
            --arabic-font-family: 'Scheherazade New';
            --arabic-font-perc: 200%;
        }

        @font-face {
            font-family: 'Scheherazade New';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url(https://fonts.gstatic.com/s/scheherazadenew/v15/4UaZrFhTvxVnHDvUkUiHg8jprP4DOwFmO24p.woff2)format("woff2");
        }

        .arabic {
            font-family: var(--arabic-font-family), sans-serif;
            font-size: var(--arabic-font-perc);
            letter-spacing:.33px;
        }
    </style>

</head>


<body dir="ltr">
    <main class="container flex">
        <div style="min-width:20rem; flex-grow:1; padding:1rem">
            <article
                style="transition:.2s ease-in-out; transition-property:transform,margin,opacity,visibility; will-change:transform,margin,opacity">
                <table style="text-align:center">
                    <tbody>
                        <tr class="arabic">
                            <td>بِالْأَثَرِ</td>
                        </tr>
                    </tbody>
                </table>
            </article>
        </div>
    </main>
</body>

</html>
Solution

  • After further digging it was found that the Hugo theme being used modified the letter-spacing, specifically it was set as: letter-spacing:.33px;.

    Specifically at the body level. As expected this cascaded and affected the Arabic ligatures in the nested elements.

    The solution was therefore to modify the CSS as following:

    .arabic {
    font-family: var(--arabic-font-family), sans-serif;
    font-size: var(--arabic-font-perc);
    letter-spacing: normal; // This is the solution !
}