The following pages provide test cases for various techniques used to link or embed CSS @font-face web fonts (TTF and EOT) in HTML pages. AVANTygarde.
- Linked as one external file (EOT and TTF)
- Linked as nine external subsets (EOT and TTF), combined using the CSS font stack
- Embedded as one internal data URI (TTF)
- Embedded as nine internal data URI subsets (EOT and TTF), combined using the CSS font stack
Findings so far:
- Safari 4 performs well on Mac and Windows with all four test cases.
- Firefox 3.5 performs fine on Mac and Windows with all four test
cases. However, initially, my test font had a "name" table that was
larger than (I don't remember what...) -- then Firefox on Windows did
not load the font.
- Internet Explorer 8 on Windows performs fine on cases 1 and 2 but
does not permit data URI embedding even if the subsets are <32 KB (i.e.
test case 4).
- Opera 10.00 build 1750 on Mac and Windows performs fine with test 3, but performs
erratically (sometimes renders, sometimes does not render, sometimes
crashes) on tests 1 and 2, and only renders the first subset from the
CSS font stack in test 4.