Failure-over Font settings

Issue #442 new
Nelson Bartley created an issue

I have a request for the Fonts area. It would be nice to have the ability to specify secondary fonts, so CJK users can specify their rendering font.

Currently, if you add custom CSS font-families at html,body level, the selected font overrides them as they are specified 13 different places in the css. When working with Latin/CJK mixes, you need to specify fonts like:

font-family: "Noto Sans", "Noto Sans JP", sans-serif;

where "Noto Sans JP" is loaded via Extra HTML from google early access fonts.

Why this is important: If you specify a main font in the theme, it will render all Latin characters using that font, but when it hits CJK characters it will choose whatever font the system thinks is default. On Mac this is Hiragino, which isn't bad with something like Open Sans, but on English Windows it will select Simsun which is a Chinese font and renders at different line heights. When a CJK font user wants to specify their font for the site, they either need a super font package (containing the latin and extra UTF characters) or more commonly it's specified as two different but compatible fonts.

Comments (5)

  1. Info 3bits

    Nelson, thanks for rising this issue.

    As far I can see, you can use Noto for CJK languages adding to Noto the right language. For example:

    Japanese -> font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif; Tamil -> font-family: "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Sans", sans-serif;

    The question is that there are about 100 different languages with a different combination and could be really difficult to add them to the font selector. Do you know a quick way to add the right combination files for each language?

    Can we insert the fonts using Google Fonts, like Noto, or the only way is download the font to the server?

    I have in mind to add a custom font where you can upload your fonts an then Adaptable could insert as any other Google font. Then you can add Noto CJK or any other available font like DaFont or Squirrel fonts.

  2. Nelson Bartley reporter

    My suggestion would be to add two optional fields, one for a custom style sheet for fonts (ala Google early acces) and another where you can input extra names. I imagine the extra css could be a single line and extra font designation could be beside each font selector.

    I actually wouldn't make them a drop down as the combinations would just be crazy in the end, and it's only really needed for a few fonts. Besides, anyone working in these fonts will understand the purpose of the failover selector.

  3. Info 3bits

    I think one custom field where you can add any font already uploaded to the fonts theme folder can be enough.

    For example, Armenian which use serif, you can enter the fonts needed and the failback in the custom field:

    "Noto Serif Armenian", "Noto Serif Georgian", "Noto Serif", serif;

    You upload the full pack of fonts (Armenian, Georgian and Serif) to themes/adaptable/fonts and then Adaptable will add the fonts to @font-face and use it in font-family selector adding the fallback.

    That could be a general purpose solution for all the custom fonts not only Noto. I will not use the Early Access options since some fonts are really heavy and can have download problems.

  4. Nelson Bartley reporter

    Apologies for the delay,

    I agree that using Early Access is not the best solution. So long as there was the option to specify at least once, globally, the fail over font for the whole site that would address the major issue of ensuring that multi-language sites can select the correct language (mostly a CJK issue atm). It would be nice to set the fail over font name everywhere we set fonts as some failovers look better in combination with other fonts for the intended purposes.

  5. Log in to comment