BuddhaNexus / buddhanexus-frontend-next

BuddhaNexus Frontend 2.0
buddhanexus-frontend-next.vercel.app
2 stars 1 forks source link

Fonts for different parts of the site #128

Closed ayya-vimala closed 7 months ago

ayya-vimala commented 7 months ago

The fonts on the site are not always displaying correctly. 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;
}
ayya-vimala commented 7 months ago

double issue