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:
- At Font Squirrel, select the font you wish to embed.
- Change the Choose a Subset menu from English to Don’t Subset
- 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.
