Recently in Phonetics Category

CSS3 Greek Font Embed with Font Squirrel

|

I've heard some buzz about newer methods font-embedding, but hadn't had a chance to test it until now. The good news is that you CAN embed fonts across multiple browsers (including Internet Explorer, Safari, Firefox and Google Chrome.) The silly news is that it looks like each browser wants a different font format (or pretty darned close). But it's surprisingly robust for all that.

I'll describe the process, but I strongly recommend getting help from a Web font repository like Font Squirrel, Webfonts.info or Kernest which will generate some code for you. I will be documenting with Font Squirrel so I won't have to rely on remote hosting.

@font-face Theory

The magic of modern font embedding happens via the magic of a @font-face CSS style declaration. This declaration names the font then provides the URL so it can be embedded, but because each browser supports one and only one format, you actually need links to four different uploaded versions of the font.

The font versions in play are the following:

  • Embedded Open Type/EOT (.eot) from Microsoft for Internet Explorer - this has actually been around since the late 90s but is only now living to its potential.
  • TTF and OTF - These are the usual True Type and Open Type font formats and embedding these are supported on FIrefox (3.5+), Safari (3.1+) and Opera (10+).
  • SVG - The Scalar Vector Graphic format. This is the format that Google Chrome and many mobile phones support including iPhone 3.1 (although Droid apparently supports TTF).
  • WOFF - this is a new format that is supported on Firefox 3.6+, Internet Explorer 9+, Chrome 5+

I'll talk about how to get the different versions of the fonts in a future blog post, but it looks like that at some point the key format will be WOFF which is a compressed version of a TTF/OTF font. Since embedding requires the viewer to download a font, smaller font sizes are better.

Simple Download with Character Range Tip

Another piece of helpful news is that some common open source fonts have been converted for you including Galatia SIL (Greek and Latin) and Gentium (Phonetics, Extended Latin plus Greek) (thanks Font Squirrel!)

Warning - there is a download catch. Font Squirrel assumes that you are writing in English only, so the default download gives you ONLY ENGLISH LANGUAGE characters in order to make the file size smaller.

Since you're at a Unicode blog, I will assume you want these fonts for their non-English characters. So when you download Galatia SIL and Gentium, make sure you do the following:

  1. At Font Squirrel, select the font you wish to embed.
  2. Change the Choose a Subset menu from English to Don't Subset
  3. Click Download@font-face kit

Planning Supported Ranges in Fonts

Speaking of character ranges, you should plan your embedded font selections carefully so that viewers download a font with only the characters needed to view the Web page. That is, you probably want to avoid full versions of the mega fonts and use specialized fonts or slimmed-down versions of a mega font. Indeed, if your script is well supported (e.g. Chinese, Japanese), you can probably skip font embedding except for some extremely rare characters.

For instance, on the Penn State Computing with Accents language pages, I will be including custom @font-face declarations for the specific scripts used on a page. One of these is the Greek Unicode page in which Galatia SIL is embedded. (FYI - I embedded Galatia SIL because it includes some of the rarer Greek characters and is a serif fonts, which I do like for reference).

Some Embedding Code

Let's talk about embedding Galatia SIL on a Greek page. The @font-face file that is downloaded from Font Squirrel contains the different versions of each font as well as sample code and CSS declarations to copy and paste.

Once the file is downloaded, you can test locally, then upload the fonts and your new pages to your Web site. I put any fonts I will embed into a fonts directory (along with licenses in case anyone pokes around). I also put each font into its own folder.

The next step is to add a @font-face declaration in CSS. Here is mine, based on the stylesheet.css file from Font Squirrel:

<style type="text/css">
<!--

@import url("../int.css");

/*** @font-face code adapted from stylesheet.css file from Font Squirrel. Thanks again! ***/
@font-face {
font-family: 'GalatiaSILBold'; /*** Name of Font ***/
src: url('/fonts/Galatia/GalSILB-webfont.eot'); /*** Link to IE EOT file first ****/
src: url('/fonts/Galatia/GalSILB-webfont.eot?iefix') format('eot'), /*** EOT again with IE Version control **/
url('/fonts/Galatia/GalSILB-webfont.woff') format('woff'),
url('/fonts/Galatia/GalSILB-webfont.ttf') format('truetype'),
url('/fonts/Galatia/GalSILB-webfont.svg#webfontJEXBBlW4') format('svg');
font-weight: normal;
font-style: normal;
}

-->
</style>

This embeds the font on a single page, but if you need to embed a font on multiple pages, add the @font-face declaration to the site-wide .css file.

At that point, the font named in the font-face declaration can be used as part the font-family or font attributes in later declarations. Here is my .bigbluegreek class and then the reference to the class used in HTML

.bigbluegreek {font-family: 'GalatiaSILBold', 'Arial Unicode MS', sans-serif;
font-size:24 px; color: #006; text-align:center;}

<!-- Table Cell -->

<td class="bigbluegreek">μ</td>

Note that the font-family declaration still includes alternate fonts...just in case the font-embedding doesn't work on a particular browser.

Font Copyright

I'm going to the end the entry here, and talk about font conversion another time, but if you do want to embed a font, make sure the license lets you do it. Many open-source fonts include the options to modify the font, so creating alternate versions is OK. Commercial foundries are also offering @font-face kits for their fonts also... for a fee.

Categories:

Quivira Unicode Font

|

I just discovered a new large True-Type Unicode font called Quivira from a German developer. It is based somewhat on Garamond, and includes a lot of useful characters such as Latin, Phonetics, Math, Greek, Coptic, Cyrillic, Cherokee, Currency, Box/Geometrics/Arrows, Old Italic, Gothic, Braille, Armenian, Hebrew and so forth.

The site is in German, but there's enough information for a user to get by using "Internet German", and as the author says "Quivira ist Freeware."

Download: http://www.grinningbit.com/quivira.php
List of Characters (PDF): http://www.grinningbit.com/files/Quivira.pdf

Categories:

My Favorite Unicode Fonts

|

These are the fonts my inner linguist can't live without. Many of these are from academic consortiums (consortia) who offer them for free. This avoids the trouble of waiting for the corporate vendors to get around to us linguists (we really aren't that big a customer base darn it!)

TITUS Cyberbit - Freeware from the University of Frankfurt. This includes characters from many scripts such as Armenian, Cyrillic, Greek, Coptic and more. I find that the characters for each script have been designed for god readability based on traditional forms.

SIL Fonts - Your choices are Charis SIL (a new font designed partially for print), Doulos SIL and Gentium. These include all phonetic symbols and Latin alphabet symbols as wellas Greek and Cyrillic. Additional phonetic symbols are included in the Private Use Area.

Cardo - This one is tied to the Thesaurus Linga Graecae and includes Coptic and unusual variants and rare ancient Greek letters/symbols in the Private Use Area as well as Latin and phonetic letters. I rarely need a digamma, but I'm very happy to have it available.

Aboriginal Sabs Serif - This one includes phonetic stuff and Cherokee and Canadian Aborigonal Syllabics (another script used by several Native American Languages). Oh, and it gets you a sans-serif phonetics font.

Chrysanthi (Chrʃsanþi) - Don't let the New Age symbols fool you. The Chrysanthi font is actually a nice little addition for your font library containing symbol Unicode blocks which are otherwise hard to find. (FYI - þ = "th" and ſ = "s").

Junicode - Includes characters for medieval languages, Runes and more unusual combined characters and medieval symbols in the Private Use Area.

Categories:

The Schwa (Upside Down E)

|

If there's one phonetic symbol Americans are mostly likely to know it's the "schwa" /ə/ or "upside down e" for the "uh" sound. I personally remember from elementary school. Here it is in multiple fonts

Schwa in Multiple Fonts

Sound

In phonetics this is the sound similar to "uh" in American English. In many dialects of English, vowels of unstressed syllables are commonly pronounced as schwa and is one reason for spelling difficulties (e.g. is it -ible or -able both of which are really [əbəl]) It's a common "neutral" or "resting" vowel found in many languages including French, Welsh, Irish and others.

Origin of Glyph

Schwa is close to Spanish "e" (and closer to French "e" of le), so that's why the Letter E got flipped in this case.

Origin of Name

The word "schwa" is from the Hebrew word שְׁוָא (šěwā’, /ʃəˈwa/), meaning "nought"—it originally referred to one of the niqqud vowel points used with the Hebrew alphabet, which looks like a vertical pair of dots under a letter. This sign has two uses: one to indicate the schwa vowel-sound
http://en.wikipedia.org/wiki/Schwa#The_term (19 Feb 2007)

Categories:

About The Blog

I am a Penn State technology specialist with a degree in linguistics and have maintained the Penn State Computing with Accents page since 2000.

See Elizabeth Pyatt's Homepage (ejp10@psu.edu) for a profile.

Comments

The standard commenting utility has been disabled due to hungry spam. If you have a comment, please feel free to drop me a line at (ejp10@psu.edu).

Powered by Movable Type Pro

Recent Comments