thomaspark / gridgarden

A game for learning CSS grid layout 🥕

Home Page:https://cssgridgarden.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Change font configuration to support Greek

lmintmate opened this issue · comments

I'd like to translate this great CSS Grid tutorial of yours to Greek, and thought I'd look at the fonts used, to see if they're compatible. It appears that the main font used is PT Sans, by which the only non-latin-character language supported is Russian. I wondered then what font was used for the farsi translation, and found out it was Tahoma, with Verdana, Segoe and sans-serif used as fallbacks, and this because the exception was specified in the .css file .
It seems then that the current main font doesn't support Greek (I didn't find in the code though what fonts are used for chinese and korean, so maybe the fonts used for these support Greek as well?), and the font configuration might have to be changed in order to support it. In another project where I wanted to contribute a Greek translation, because all the other translations had latin characters, the maintainer had to change the main font (also PT Sans) to another one, compatible with Greek (I proposed Open Sans, Noto Sans and Roboto, and he picked the first). But this project having already accounted for languages with non-latin characters could use a different approach from that one, and just define an exception in the css as in the case of farsi. Please let me know of which approach is easier for you.

P.S.The other two fonts used throughout the site, the one for the title "GRID GARDEN" (Autour One) and the one for the source code (Source Code Pro) can obviously remain as they are, since the strings they style remain in english in all translations.

Hi @lmintmate, first of all welcome and thanks for your contributions.

For languages whose glyphs aren't supported by the defined font (PT Sans in this case), the browser will fall back to another font that can support it, either a specific font named in the font-family property or a generic local font based on the sans-serif value. So there should be no problem rendering Greek characters.

If we do run into some styling issues, I can tweak after the fact. Let me know if you have any questions about doing a translation. Greek is one of the major languages we're missing for both Grid Garden and Flexbox Froggy so your translation would be very welcome.

Thanks for your reply. I'm aware there's a fallback font, often however it doesn't look very good compared to any non-Greek glyphs co-existing on the page. Your "wait and see" approach, as opposed to proactively elminating any such issues, is fine with me though, so I guess we'll see how it looks after I make the pull request and the translation goes live.
I already started translating, so I'll finish and do a pull request some time tomorrow at the latest (to make sure there aren't any typos).
P.S. I did find Flexbox Froggy soon after this one, and I might translate it in the future, but I'll have to play the tutorial of that one first, to get the feel of the layout and the terminology.