Review fonts

[aminahbl]

The fonts for BN v1 were selected for their support for DB languages.

The current fonts do not support all characters:

[ayya-vimala]

On the old site, the fonts for the various languages used are:

      @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
      @import url('https://fonts.googleapis.com/earlyaccess/notosanstibetan.css');
      @import url('https://fonts.googleapis.com/earlyaccess/notosansdevanagari.css');
      @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&family=Source+Serif+Pro&display=swap');

....

        /* https://css-tricks.com/snippets/css/system-font-stack/ */
        --source-sans-font-stack: 'Source Sans Pro', Roboto, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
          'Segoe UI Emoji', 'Segoe UI Symbol';

        --source-serif-font-stack: 'Source Serif Pro', serif;

        --system-font-stack: Roboto, -apple-system, BlinkMacSystemFont,
          'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
          'Segoe UI Emoji', 'Segoe UI Symbol';

        --alt-font-stack: 'Noto Sans TC', -apple-system, BlinkMacSystemFont,
          'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
          'Segoe UI Emoji', 'Segoe UI Symbol';

        --tibetan-font-stack: 'Noto Sans Tibetan', -apple-system, BlinkMacSystemFont,
          'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
          'Segoe UI Emoji', 'Segoe UI Symbol';

        --devanagari-font-stack: 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont,
          'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
          'Segoe UI Emoji', 'Segoe UI Symbol';

Then the fonts are used for:

Pali, Sanskrit and Tibetan in roman script:

[lang="tib"], [lang="skt"], [lang="pli"] {
    font-family: var(--source-sans-font-stack);
}

For Pali and Sanskrit in devanagari script (you might not use this on the new site?):

[lang="pli"][trans="uni"] {
    font-family: var(--devanagari-font-stack);
    -webkit-font-smoothing: antialiased;
}

For Tibetan in tibetan script:

[lang="tib"][trans="uni"] {
    font-family: var(--tibetan-font-stack);
    -webkit-font-smoothing: antialiased;
    font-size: 1.1em;
}

For Chinese:

[lang="chn"] {
    font-family: var(--alt-font-stack);
    -webkit-font-smoothing: antialiased;
}

[aminahbl]

Thanks so much @ayya-vimala. Based on the info you've shared above, I've made a preliminary step of just updating the serif font to Noto Serif: https://github.com/BuddhaNexus/buddhanexus-frontend-next/pull/129. This fixes the issue with special Pali characters that first highlighted the issue, but maybe there needs to be a further update.

I think it would be good for the team to have a look at this and test on the staging site. Ideally, it would be nice to use the same font across all DB languages for a more unified feel, but if there are still some remaining issues then I can look at DB language specific fonts.