Fonts for Ancient Greek
You Have Disabled Your CSS Styles!
This page displays different fonts for a single passage of Ancient Greek text.
Some fonts are embedded with @font-face, and should appear on all computers; others will only display correctly if they have already been installed on the user's computer. (In cases where non-embedded fonts are not present on your computer, the text will default to the Monospace font instead).
Note that the spacing of the different fonts can be adjusted in CSS with letter-spacing, word-spacing and / or line-spacing.
Quick Font Comparison
Choose a font for the following passage of Ancient Greek.
(For the "UNUSABLE" fonts, pay close attention to at the shape of unaccented vowels vs. their polytonic counterparts.)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
* New fonts added April 7, 2021
Discussion:
Fonts Usable On Both Desktop & Mobile
Theano Didot, Theano Modern, Theano Old Style
Theano Didot, Theano Modern and Theano Old Style are all fine-looking old-fashioned fonts. They need to be embedded with @font-face, since they are relatively rare. (It appears that a version of Theano Didot called GFS Didot is also embeddable via Google Fonts).
The stroke is a little thin on Theano Modern and Theano Old Style, and italics would be difficult to differentiate on these two because the fonts are already oblique to begin with. Theano Didot does not have this problem, but the stroke thickness is inconsistent, which makes it difficult to read at smaller font sizes.
Galatia
Galatia is a more modern-looking serif font, with a very nice rho (ρ) and psi (ψ). Its only drawbacks are its florid rendering of pi (π), and the fact that it needs to be embedded due to its rarity on most computers.
Times New Roman
Times New Roman is the workhorse of English fonts, and the same goes true for ancient Greek as well. Some of the renderings may not be to everyone's taste, but appearance-wise, Times New Roman is quite possibly the best choice for ancient Greek characters. It is also found on 99.8% of all Windows computers, so most users will already have it.
New Athena Unicode Regular, Cardo Regular
New Athena Unicode Regular and Cardo Regular both have a hand-written style and are almost serif-free. New Athena Unicode Regular has a thicker stroke and is thus a little easier to read. Strangely, New Athena Unicode Regular has a minor problem found in none of the other fonts here: its line-height needs to be specified in the stylesheet or its lines will run together vertically.
Both are rare, and need to be embedded with @font-face. (Cardo is also embeddable via Google Fonts.)
Fonts Usable On Desktop Only
Palatino Linotype
Palatino Linotype is another fine old-fashioned font, and is present on 99.5% of Windows desktops. But the stroke is a little thin, and the tail on the rho (ρ) may extend a little too far to the right for some. Curiously, it appears to render as Times New Roman on mobile phones, but it does work.
Minion Pro, Monospace
Palatino Linotype is another fine old-fashioned font, and is present on 99.5% of Windows desktops. But the stroke is a little thin, and the tail on the rho (ρ) may extend a little too far to the right for some. Unfortunately, it doesn't render on mobile phones.
Minion Pro is light on serifs, and is apparently quite uncommon on desktops. It, too, does not render on cell phones.
Monospace type renders well on desktops but not mobile. An additional shortcoming is that it isn't a particularly attractive font.
Fonts Unusable On Both Desktop & Mobile
Garamond
Garamond is present on 85% of all Windows computers, but is unusable because it does not render letters with accents or breathing marks correctly (the displayed passage on this page is usually a mix of Garamond and Monospace letters...though in Opera, all letters after the accented letter will be rendered in Monospace). Which is a shame, because the psi (ψ) and eta (η) in this font look terrific. (Apparently, Garamond Premier Pro does not have this problem.)
Adobe Garamond Pro & Charlemagne Std
Adobe Garamond Pro and Charlemagne Std are completely unusable since they do not render Greek characters other than pi (π). Hence, they render most characters in the default Monospace font. I have displayed these fonts simply to illustrate their renderings of pi. Charlemagne Std in particular has a very attractive pi -- the top stroke has a bend or curve which is not found in most other fonts.
Droid Serif Regular
Droid Serif Regular is light on serifs, yet stylish and readable. This font is also unusable because it does not render polytonic characters.
Sylfaen
Sylfaen is also light on serifs, and is found on 98% of all Windows machines. But it's unusable since it does not render accented characters.
Constantia, Candara
Constantia and Candara are similar, and both are light on serifs (particularly Candara). One advantage of these two fonts is that Constantia is found on 88.5% of Windows computers, while 88.7% of Windows machines have Candara. Unfortunately, both are unusable because they lack support for polytonic characters.
Conclusion
From the results shown, I would recommend that a webmaster wanting to display Ancient Greek should find an attractive embeddable font. In my case, I prefer Theano Didot Regular.
Recognizing that sometimes an embedded font may fail to load, at least one default font should also be specified. Times New Roman (for Windows) and Times, would be a good choice for this, given the ubiquity of these similar fonts.
In the extremely unlikely event that a computer requires an additional default font, Palatino Linotype or monospace can be declared in the styles as a last resort. Be aware however, that these fonts may not fully render on mobile phones.
Therefore, the recommended FONT-FAMILY declaration in the stylesheet would be as follows:
font-family: TheanoDidotRegular, "Times New Roman", Times, "Palatino Linotype", monospace;
(Webmasters may substitute the embeddable font of their choosing in lieu of TheanoDidotRegular.)
Fonts Usable On Desktop & Mobile
Theano Didot (embedded)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Theano Modern (embedded)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Theano Old Style (embedded)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Palatino Linotype
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Galatia (embedded)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Times New Roman
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
New Athena Unicode Regular (embedded)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Cardo Regular (embedded)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Fonts Usable On Desktop Only
Minion Pro
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Monospace (default)
Does not always render correctly on mobile phones!!!
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Fonts Unusable On Both Desktop & Mobile
Garamond
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Adobe Garamond Pro
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Charlemagne Std
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Droid Serif Regular (embedded)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Sylfaen
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Constantia
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Candara
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
English Translation:
"Strepsiades happens to be lamenting because he owes a lot of money. For his son, being crazy about horses, always takes a lot of money. And now, the son sleeps deeply, but sleep does not take the father."
New Tested Fonts
UPDATE (Apr 7, 2021): NTRESOURCES.COM has a list of fonts compatible with polytonic Greek. In this section, these will be examined for their usefulness on both desktop & mobile.
Arial (desktop & mobile)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Palatino (desktop & mobile)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Tahoma (desktop & mobile)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Times (desktop & mobile)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Arial Unicode MS Regular (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Calibri (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Cambria (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Consolas (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Courier New (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Gabriola Regular (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Gentium Plus (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Lucida Bright (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Lucida Console Regular (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Lucida Handwriting Italic (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Lucida Sans Typewriter (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Microsoft Sans Serif Regular (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
serif (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
sans-serif (desktop only)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Lucida Sans (unusable)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
cursive (unusable)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
Discussion
With minor differences, Arial appears to be almost identical to Arial Unicode MS Regular, Microsoft Sans Serif Regular and sans-serif. However, Arial displays on both desktop and mobile, while the others only display well on desktop.
Calibri is a fine sans serif font, but only works for desktop.
Cambria is very similar to sans-serif, with greater letter spacing. Again, this only displays on desktop.
Consolas and Courier New are sans-serif and serif, respectively. As a monotype font, the latter sometimes has some strange letter spacing. At any rate, both only display well on desktop.
Gabriola Regular has a handwritten look to it and includes ligatures. Webmasters may have to increase its font-size and fiddle with its line-height because its a fairly small font. Some users may not like its rendering of the miniscule theta.
Gentium Plus looks good, but would probably require embedding.
NTRESOURCES.COM recommends Lucida Grande for polytonic Greek, but this font was not present on my computer. Therefore, other members of the Lucida font family were used.
Lucida Bright, Lucida Console Regular and Lucida Sans Typewriter are both acceptible for desktop use, but rising tones are rendered as vertical lines above the vowels.
On the other hand, Lucida Handwriting Italic does render rising tones correctly on desktop.
Strangely, Palatino appears to be a quite different font from Palatino Linotype. Both render well on desktop and mobile, however.
Tahoma has a very blocky rendering of pi and is not particularly attractive, but displays well on both desktop and cell phone. Unfortunately, it displays rising tones as a vertical mark above vowels.
Times appears identical to Times New Roman, and displays just as well on desktop and mobile.
Oddly enough, neither serif nor sans-serif display on mobile phones.
Of the newly-tested fonts, only Lucida Sans and cursive were completely unusable. The former displays breathing marks which run together with tones on vowels, while the latter lacks glyphs for vowels with breathing marks.
Conclusion
For displaying Ancient Greek in a serif font, the following font stack would be recommended:
font-family: "Theano Didot Regular", "Times New Roman", Times;
On the other hand, those wishing to display Ancient Greek in a sans serif font would be advised to use the following font stack:
font-family: "New Athena Unicode Regular", Arial;
Theano Didot (with flame effect)
(Mobile phone users will only see a static flame effect on the following text. The animated flame effect has been deactivated for mobile phones because it freezes small screens for a few seconds.)
ὁ Στρεψιάδης ὀλοφυρόμενος τυγχάνει διότι πολλὰ χρήματα ὀφείλει. ὁ γὰρ υἱός, ἱππομανὴς ὤν, πολλὰ χρήματα ἀεὶ λαμβάνει. νῦν δὲ τυγχάνει βαθέως καθεύδων ὁ υἱός, ὕπνος δ’ οὐκ ἔχει τὸν πατέρα.
The ring, the ring! To Mordor, we will take you!
(LOTR Ringwraith image from www.examiner.com)
References
This web page originally displayed static HTML samples in different fonts of a text passage written in Ancient Greek.
The text used was from Reading Greek: Text and Vocabulary. 2009. JACT. p. 54.
<SELECT> Boxes & JavaScript
On March 29, 2021, the styles for this page were re-written to convert it from a static to a responsive layout. In addition, a <SELECT> box was added to allow the user to choose a font for the top paragraph written in Ancient Greek.
- Using HTML
<SELECT>options with JavaScript - Display the option selected from a
<SELECT>box using JavaScript
Changing FONT-FAMILY With JavaScript
JavaScript code was needed to change the FONT-FAMILY styles for the top paragraph.
HTML Language Attributes For Ancient Greek
Finally, language attributes were added to all the paragraphs written in Ancient Greek.
- Language attributes and accessibility
lang="grc",xml:lang="grc", and transliteration for Ancient Greek- Language attributes in HTML (Ancient Greek: lang="grc" vs. Modern Greek: lang="el")
- How to style elements with language attributes using pseudo-classes (not done on this page, but would have been useful)
- Styling with language attributes (in-depth discussion)
According to the last two links, styling with the language pseudo-class works with the following syntax:
p:lang(grc) { font-size: 2.5em; }
Alternatively, one can also style by targetting the language attribute:
p[lang="grc"] { font-size: 3em; }
Flame Animation
A flame animation effect was added to the title, as well as a later passage from Ancient Greek, and a final font demonstration at the end of the page.
UPDATE (Mar 30, 2021): The flame animation effect may freeze the screens of older mobile phones for a few seconds. Webmasters may wish to use media queries to serve styles without this effect to small screens.
UPDATE (Mar 31, 2021): Styles for a static flame effect are now being served to mobile phones instead of the animated flame effect. While this does slow small screens slightly when applied to long blocks of text, it does not freeze them.
- Static CSS3 flame effect (in current use on this site for mobile phones)
- Static flame effect from Google Fonts (an alternative set of styles, but not used on this site)
Google Font API test
The following title should render in the Diplomata SC font, with a flame animation special effect. While the flame animation DOES work in Firefox, Google Chrome and Safari, it does not work in Opera or Internet Explorer.
(Mobile phone users will see a static flame effect on the text that follows. The animated flame effect has been deactivated for mobile phones because it temporarily freezes small screens.)
Fonts For Ancient Greek
