tl;dr: Use this
font-family CSS declaration to successfully display Western Cree syllabics
for most visitors to your website:
font-family: Gadugi, Euphemia, 'Euphemia UCAS', 'Aboriginal Sans', 'Noto Sans Canadian Aboriginal', sans-serif;
Include the following line to your website’s <head> to automatically download
a syllabics font if no appropriate fonts are installed on your
smartphone/computer/device:
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosanscanadianaboriginal.css">
Read the rest of this article to learn more about choosing syllabics fonts for the web!
What you need to know to understand this post
You will need to know how to:
If you’ve ever added a custom font from Google Fonts to your website, you know enough to follow this post!
It’s also helpful to know the difference between serif and sans-serif fonts.
Let’s get started!
Have you ever wanted to display Cree syllabics on your website, but when you tried, all you got were these blank boxes, colloquially called tofu?
□□□ □□□□□□! □□□□□□□□□□ □□□□□ «□ □□□□□□□□□»□
Tofu no longer! Let’s discuss the various syllabics fonts that exist out there, where they are commonly found, and let’s create a font stack: a list of fonts that your web browser tries in order such that it finds a font that displays syllabics correctly.
Common syllabics fonts
I will discuss the following fonts:
- Aboriginal Sans and Aboriginal Serif
- Euphemia
- Gadugi
- Noto Sans Canadian Aboriginal
There are many more syllabics fonts out there, but in this post, I want to focus on just enough for you to make syllabics work on websites.
I made an interactive demonstration of these fonts that you can play with. Go ahead and type any text in Western Cree into the box and it will be converted to syllabics and displayed in the appropriate font, if it’s available on your system:
See the Pen Syllabics font playground by Eddie Antonio Santos (@eddieantonio) on CodePen.
But where do these fonts come from? Where should you expect these fonts to be available?
Aboriginal Sans and Aboriginal Serif
As the names suggest, they have both serif and sans-serif variants for writing in Latin script (e.g., English, French, etc.).
Who created these fonts?
These fonts were created by the Language Geek himself, Chris Harvey.
Where are these fonts pre-installed?
As far as I know, no system has Aboriginal Sans or Aboriginal Serif pre-installed, so you have to download them yourself from his website. Sometimes, they are bundled with certain Keyman keyboard layouts.
If you’ve tried getting syllabics to work on your computer, chances are, you’ve downloaded either of these fonts!
Languagegeek.com has many other fonts that display syllabics.
Gadugi
This is a modern font that displays both syllabics and Cherokee. “Gadugi” is a Cherokee word that means “cooperative labour”.
Who created this font?
I believe Microsoft commissioned this font.
Where is this font pre-installed?
Gadugi has been included in all versions of Windows since Windows 8. It’s also available as a “Cloud font” on Microsoft Office products.
Euphemia
Euphemia or Euphemia UCAS1 is a sleek font for syllabics. It also includes glyphs for Latin (e.g., English/French) characters.
Who created this font?
Tiro Typeworks created Euphemia. Ross Mills from Tiro has also created the Pigiarniq for Inuktitut, but I will not cover that font in this blog post.
Where is this font pre-installed?
Euphemia is distributed on Windows Vista and newer. It is currently distributed as Euphemia UCAS on Apple systems (macOS/iOS).
Issues
Unfortunately, for East Cree, this font will NOT work, as it has the incorrect orientation for the ᔓ (sho) and ᔕ (sha) syllabics 😱
So I would recommend omitting it from the font stack for Eastern Cree.
So if you can’t use Euphemia, which font should you use instead?
Noto Sans Canadian Aboriginal
Noto is Google’s project to eliminate tofu (□) for all languages of the world, hence noto (“no more tofu”).
As far as I’m aware, Google does not have a “Noto Serif Canadian Aboriginal”.
Who created this font?
As mentioned, Google created Noto Sans!
Where is this font pre-installed?
Noto Sans Canadian Aboriginal can be found on Google products, such as Android phones, Android tablets, and Chromebooks.
Importantly, Google allows website authors to embed Noto on your website, just as you can embed other fonts via their Google Fonts service.
Most modern web browsers will automatically download Noto Sans if you included it in your font stack and no appropriate font is found.
How to get the right fonts to appear on your webpage
Now that we know about what fonts are out there, lets construct
a font-family declaration that will support syllabics on as many
devices as possible.
Recall that the font-family declaration is a list of fonts that the
web browser will try in order. The first font in the list that is
installed will be used.
Let’s start with the fallbacks first. Let’s say our users’ device
does not have a font that supports syllabics installed on their
computer. Since Google allows Noto Sans Canadian Aboriginal to be
automatically downloaded on your website when needed, let’s start with
this font-family declaration:
body {
font-family: 'Noto Sans Canadian Aboriginal', sans-serif;
}
To get your browser to download the appropriate fonts, add this to your
website’s <head>:
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosanscanadianaboriginal.css">
Add support for Aboriginal Sans
Perhaps your reader has installed Aboriginal Sans to their computer.
Update your font-family declaration as follows:
body {
font-family: 'Aboriginal Sans', 'Noto Sans Canadian Aboriginal', sans-serif;
}
This way, the web browser will try using Aboriginal Sans if it’s installed, and then attempt to download Noto Sans.
Add support for Mac/iPhone/iPad users
(omit this step for East Cree!)
Now let’s support users of Apple devices. Prepend Euphemia UCAS to
the font-family declaration:
body {
font-family: 'Euphemia UCAS', 'Aboriginal Sans', 'Noto Sans Canadian Aboriginal', sans-serif;
}
Add support for Windows Users
Recall that earlier versions of Windows include Euphemia; later versions support Gadugi. Prepend the following rules to try using Gadugi first.
body {
font-family: Gadugi, Euphemia, 'Euphemia UCAS', 'Aboriginal Sans', 'Noto Sans Canadian Aboriginal', sans-serif;
}
Finally, specify your Latin fonts
If you’re displaying Latin text (e.g., English, French, Cree SRO, etc.), then this font goes first. Recall that many of the syllabics fonts contain glyphs for Latin characters, so we will have to list our preferred Latin font first.
For this example, say I want to use Open Sans (which you can embed from Google Fonts). Prepend Open Sans to the front of the list:
body {
font-family: 'Open Sans', Gadugi, Euphemia, 'Euphemia UCAS', 'Aboriginal Sans', 'Noto Sans Canadian Aboriginal', sans-serif;
}
You’re done! You’re ready to display syllabics on the web!
Finished!
With these declarations, you should be able to display syllabics on your website, and be reasonably confident that everybody can read it.
Here’s a complete example that uses our syllabics font stack in addition to a few fonts from Google Fonts to round things out:
See the Pen Syllabics font stack complete example by Eddie Antonio Santos (@eddieantonio) on CodePen.
-
UCAS, or “Unified Canadian Aboriginal Syllabics”, the name of the Unicode block that this font covers. ↩
Never miss a
story from us, subscribe to our newsletter