CODEWITHSUNDEEP
htmlcssfonts
Tom Hosker
Tom Hosker

Reputation: 722

How should I add support for obscure alphabets to my website?

The Problem

I've made a website for myself, using the Express framework for NodeJS, and it works pretty much as I'd hoped it would.

One remaining irritation is how best to provide support for the more obscure scripts and alphabets the world has to offer.

At present, I'm using a version of the Computer Modern font, using these files specifically, which I import via CSS in the following code:

@font-face {
  font-family: computerModern;
  src: url("fonts/cmunrm.ttf");
}
@font-face {
  font-family: computerModern;
  src: url("fonts/cmunti.ttf");
  font-style: italic;
}
@font-face {
  font-family: computerModern;
  src: url("fonts/cmunbx.ttf");
  font-weight: bold;
}
@font-face {
  font-family: computerModern;
  src: url("fonts/cmunbi.ttf");
  font-weight: bold;
  font-style: italic;
}

...

body {
  font-family: computerModern, serif;
  padding-left: 20px;
  padding-right: 20px;
}

This approach has worked quite well so far - up to a point. The Latin alphabet is printed beautifully, as are the Greek and Cyrillic alphabets. Arab text also looks pretty, although, looking through the character lists of the .ttf files, my browser must just be pulling out its default Arabic font; as luck would have it, the default Arabic font complements Computer Modern rather well. But I begin to run into more serious difficulties when I want to print, for example, people's names in their native Georgian characters, e.g. სალომე ზურაბიშვილი = Salome Zourabichvili. The correct characters are printed, but my browser's default Georgian font is hideous when side by side with Computer Modern.

Potential Solutions

How should I add support for the Georgian alphabet, and other obscure scripts, so that characters are printed in a font which dovetails with aesthetic of the rest of my website? I can think of four potential solutions, two of which I'd know how to implement but are unsatisfactory, and two of which I don't know how to implement.

Known but Unsatisfactory Solutions

  1. Replacing the current .ttf files with files which cover all the desired characters. Unsatisfactory because I can't find such files.
  2. Creating a new HTML tag of the span class for each obscure alphabet, any wrapping any text of that alphabet in such a tag. Unsatisfactory because the website has thousand of pages, with new ones being added all the time, and don't trust myself, let alone anyone else, to remember to use the appropriate tags.

Solutions I Don't Know How to Implement

  1. Splicing .tff files, i.e. copying characters from a.ttf to b.ttf.
  2. Adding characters from multiple .ttf files to one CSS font-family, and with the same font-style, font-weight, etc.

Upvotes: 0

Views: 52

Answers (1)

Khel_MVA
Khel_MVA

Reputation: 48

Why dont you target the html lang and load different fonts per language if needed?

Example:

html[lang=ja]>body {
    font-family: 'Yu Gothic', Arial, Helvetica, sans-serif;
}

html[lang=ko]>body {
    font-family: 'Noto Sans KR', Arial, Helvetica, sans-serif;
}

html[lang=zh]>body {
    font-family: 'Noto Serif SC', Courier, Georgia, serif;
}

Regards

Upvotes: 1

Related Questions