Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Cyrillic characters in Titles & Descriptions display in a different font

31 Mar 2023, 00:49

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
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

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

31 Mar 2023, 01:54

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;
}