This is ploddy notes in one location to save time later. To misquote the legal footer on blooberry, this isn't new or original material; but to the best of knowledge what is presented here is my wording.

There are multiple font storage formats for web work :

  • .ttf (TrueType Font) supported by: Firefox, Chrome, Safari, Android 2.2+, blackberry 7.0, IOS Safari 4.2+ and Opera
  • .otf (OpenType Font) supported by: Firefox, Chrome, Safari, Android 2.2+, blackberry 7.0, IOS Safari 4.2+ and Opera
  • .eot (Embedded OpenType) supported by: MSIE 5+
  • .woff (Web Open Font Format) supported by: MSIE 9+, Firefox, Chrome, Safari 5.0+, IOS Safari 5.0, blackberry 7.0+, Android 4.4, and Opera 11.1+
  • .svg (Scalable Vector Graphics) supported by: Chrome 4.0+, Safari 3.2+ Opera 9+, Android 3.0+, iphone 3.1+, and blackberry 7+

There are many other targeting print media. Annotations on browser support taken from 1 2 3 4 5. If I get time, I will replace the names with logos for the browsers.

Therefore a font-face command to support all browsers looks like:


@font-face {
    font-family: '$englishnme';
    src: url('$name.eot');
    src: url('$name.eot?#iefix') format('embedded-opentype'),
         url('$name.woff') format('woff'),
         url('$name.ttf') format('truetype'),
         url('$name.svg#$englishname') format('svg');
    font-weight: normal;
    font-style: normal;
}

When dealing with fonts, please ensure that you have a licence to use it. Unlike CSS itself, a font is categorised as a graphic. The fonts on my site are Ubuntu, which under opencommons2 and Open dyslexic which is MIT licence. For details in why the fonts need to look like that, please read more text

As you can see, the CSS is not trivial. This output is sourced from fontsquirrel. I have used font2web to build the EOT format, which the fonts worked, but the service is usage constrained. There is an alternative service, which produces fonts that MSIE8 doesn't like. I tried 1, but this produced files as ACB format, rather than EOT. The fontsquirrel files are also ACB. I used 2 as another alternative. ACB files seem to work in MSIE10, but not MSIE8. Care must be taken with line endings, as MSIE seems to work erratically when the above CSS is compressed. I don't have the specific edgecases listed, but this did break my font selection. The failure is listed in 3 and on stackoverflow, but also they don't have the edgecases. This resource seems useful (mostly that it gives a chain of events, rather than a bald “not wurkin'"). This last paragraph is the most important section in this resource.

There are opensource tools which one may download, fontforge specifically.


Font exploration

RSS. Share: Share this resource on your twitter account. Share this resource on your linked-in account. G+

Font exploration

RSS. Share: Share this resource on your linked-in account. Share this resource on your twitter account. G+ ­ Follow edited