Page 1 of 1

Cyrillic characters in Titles & Descriptions display in a different font

Posted: 31 Mar 2023, 00:49
by JMM
Hello, Karl,

If what I am asking in the following question is not possible, or if it is too difficult to implement, it is not a problem as I have only a dozen of so pictures to which this applies.

In those dozen or so pictures, I have a mix of Western and Cyrillic fonts in their Titles and Descriptions.  For those images, the Cyrillic characters display in a completely different font than the Western fonts.

On THIS page, if you take a look at the Title caption overlays of the 2nd & 3rd pictures, note how Юлия is displayed in that different font.  Same thing on their respective Description popups.

For the 2nd picture, I realize that I have Юлия displayed twice, but that is only temporary because I was experimenting with a different method, i.e.:
Code
Юлия
     and
Code
Юлия
As your X3 is so powerful & customizable, would there be an easy way to have Cyrillic characters displayed in the same (or at least similar) font as the Western characters?

Again, if it's not possible or not easy to accomplish that, I can easily live with the way they're displayed now :blush:.

Thanks in advance & have yourself a great day.

Regards,
John

Re: Cyrillic characters in Titles & Descriptions display in a different font

Posted: 31 Mar 2023, 01:54
by mjau-mjau
The problem is that many fonts don't support Cyrillic, and the browser will then use the default font for non-supported characters. In this case, you are using Google font Lato, which unfortunately does not support Cyrillic.

Many Google fonts do support Cyrillic, for example "Open sans", "Roboto" or "PT Sans", but then you would need to change the font in your X3 gallery (Settings > Style > Fonts). Optionally, you can also use system font (same as your OS), but this isn't generally as elegant as Google fonts, especially for headers. You can't really assign a different font specifically for Cyrillic, as that would require wrapping all Cyrillic texts inside some <span class="other-font">Юлия</span>.

I think there is a better solution, because the main problem is that the Cyrillic text displays in font "Times New Roman". By adding the CSS below to Settings > Custom > Custom CSS, instead it will use a sans-serif font, more similar in style as the Lato font:
Code
.pswp {
  font-family: Lato, system-ui;
}