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/base.min.css" media="screen">The base.min.css file contains the definitions:
/* ---------- Base font (Latin and Greek) ---------- */
.ancient-greek,
.latin {
font-family: Cardo, serif;
font-style: normal;
font-weight: 400;
}
/* ---------- Bold ---------- */
.ancient-greek strong,
.latin strong,
.ancient-greek-translation strong,
.latin-translation strong {
font-weight: 700;
}
/* ---------- Parallel verse ---------- */
.row-verse {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
}
.row-verse > .col-verse {
flex: 0 0 50%;
max-width: 50%;
box-sizing: border-box;
}
/* ---------- Parallel verse typography ---------- */
/* Same physical line height in both columns */
.row-verse .col-verse p {
line-height: 1.45rem;
margin: 1.0rem 0;
}
/* Greek and Latin */
.row-verse .ancient-greek p,
.row-verse .latin p {
font-size: 1.3em;
}
/* Translations */
.row-verse .ancient-greek-translation p,
.row-verse .latin-translation p {
font-size: 1.1em;
}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, Muse, of the man of many turnings, who wandered
far, after he had sacked the sacred citadel of Troy;
the cities of many men he saw, and learned their minds,
and on the open sea he suffered many griefs within his heart,
striving to win his own life and his companions' homecoming.
Yet even so he could not save his companions, much as he longed to;
for by their own reckless folly they were destroyed,
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.