I wanted to add classical fonts to my website, so I decided to use Cardo, a font specifically designed for scholars and students of classical languages. Cardo is a Unicode font that provides extensive support for ancient Greek, Latin, and other classical scripts. It includes a wide range of characters, diacritics, and special symbols used in scholarly texts, making it ideal for accurately displaying ancient manuscripts and inscriptions.
To implement it, I added the following lines to my HTML to include the font and my custom stylesheet:
<link rel="stylesheet" href="/assets/css/lib/cardo-400.700.min.css" media="screen">
<link rel="stylesheet" href="/assets/css/philology.css" media="screen">
The philology.css file contains the definitions:
.ancient-greek,
.ancient-latin {
font-family: Cardo, serif;
font-style: normal;
}
.ancient-greek p,
.ancient-latin p {
font-size: 1.3em;
font-weight: 400;
}
.ancient-greek-translation p,
.ancient-latin-translation p {
font-size: 1.1em;
}
.ancient-greek p,
.ancient-latin p,
.ancient-greek-translation p,
.ancient-latin-translation p {
line-height: 1.3em;
margin: 1.0rem 0;
}
This setup allows me to apply the Cardo font and other relevant stylistic change for epic poetry, specifically to sections of ancient Greek and Latin text (and their translation in modern languages) by using dedicated classes, without altering the rest of my website’s theme.
By incorporating Cardo in this way, classical texts are displayed accurately and beautifully, enhancing the readability and aesthetic appeal of the website’s ancient language content.
Here’s a complete example of how to present classical texts in Greek and Latin with the correspondent translation on my website.
The first few hexameters of Homer’s Odyssey show Greek typewriting:
ἄνδρα μοι ἔννεπε, Μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσε·
πολλῶν δ’ ἀνθρώπων ἴδεν ἄστεα καὶ νόον ἔγνω,
πολλὰ δ’ ὅ γ’ ἐν πόντῳ πάθεν ἄλγεα ὃν κατὰ θυμόν,
ἀρνύμενος ἥν τε ψυχὴν καὶ νόστον ἑταίρων.
Tell me, O Muse, of that ingenious hero who travelled far and wide
after he had sacked the famous town of Troy.
Many cities did he visit, and many were the nations with whose manners and customs he was acquainted;
moreover he suffered much by sea while trying to save his own life and bring his men safely home;
but do what he might he could not save his men, for they perished through their own sheer folly.
The first few hexameters of Virgil’s Aeneid show Latin typewriting:
Arma virumque cano, Troiae qui primus ab oris
Italiam, fato profugus, Laviniaque venit
litora, multum ille et terris iactatus et alto
vi superum saevae memorem Iunonis ob iram;
multa quoque et bello passus, dum conderet urbem,
inferretque deos Latio, genus unde Latinum,
Albanique patres, atque altae moenia Romae.
Musa, mihi causas memora, quo numine laeso,
quidve dolens, regina deum tot volvere casus
insignem pietate virum, tot adire labores
impulerit. Tantaene animis caelestibus irae?
I sing of arms and the man, who first from the shores of Troy,
A fugitive by fate, came to Italy and the Lavinian shores.
He was tossed much on land and sea by the might of the gods,
on account of cruel Juno’s unforgetting anger;
he also suffered much in war, until he could found a city
and bring his gods into Latium; from whence came the Latin race,
the Alban fathers, and the high walls of Rome.
Muse, recall to me the reasons, by what divinity injured,
or grieving at what, did the queen of the gods compel
a man distinguished for his piety, to endure so many misfortunes,
to encounter so many labors. Is there such anger in celestial minds?
With this setup each classical text is presented side by side with its translation on larger screens, while on smaller screens, they stack neatly. This format ensures a consistent, aesthetically pleasing way to present both ancient and modern text.