Siderite's Blog

and has 5 comments

Spurred by the story of the OpenDyslexic font, the one that is now included in this blog as an option for dyslexic people, I started exploring this concept of custom fonts for a web page. First of all, I wanted that the dyslexia option would work in all browsers, so I checked it in Chrome (my default), FireFox and Internet Explorer 8.

I was not surprised to see that Internet Explorer was not showing the fonts as Chrome did, but I was a little that FireFox did not render the font. I had FF 3.0.11 installed at that moment. I've updated FireFox, checked it, seemed to be working. Then, on a whim, I started to look into web fonts for Internet Explorer. And the option exists! Even better, you can use web fonts since Internet Explorer 6! The catch is, though, that Microsoft are using a proprietary font format which only recently was submitted to the W3C as an open standard.

Now about the dyslexic fonts people. I went to their site using Internet Explorer and I got that annoyingly condescending message "You are using an outdated browser.". In other words if you are dyslexic they will make and host a free font for you, but if you use Internet Explorer, screw you! I found this behaviour at least weird and more towards offensive.

So I downloaded their font, converted it from OTF to EOT format using the online free font converter Font2Web, then went to find some sort of font hosting site that would allow me to upload and host my custom font. And I found one called TypeFront. They are only offering for free only a single font that can be accessed 500 times daily, but still better than the other services that ask for money for every single option. So close to making the dyslexia option cross browser! And FAIL. TypeFront only allows the upload of fonts with the formats OTF, TTF and WOFF. They are not even mentioning EOT. I wrote them an email, but I don't expect much. Meanwhile, if you know of a decent free font hosting site, please let me know. Update: I was wrong. The TypeFront service allows for uploading only a few formats, but then it converts and publishes all formats, including EOT and even SVG. I am happy to report that the dyslexic font works now on all browsers!

Update April 2016: It appears that the TypeFront site is completely down, the domain gone.

It occurred to me that there is an interesting possibility, that the people at TypeFront and/or the people at DyslexicFonts do not know that Internet Explorer supports web fonts. The people at Google do. Check out this site: Google Web Fonts that allows the free embedding of over 554 font families. All you have to do is embed a script in the page. Incidentally I've included a feature in the site that allows to set a custom Google font for yourself, but there is no visual interface for it, yet. Their problem is that they did not adopt any font for dyslexics.

So, after documenting my journey, let me give you some links to resources that explain where all these formats come from, why some fonts are free and some are not, and so on:

  • True Type font format (TTF) - you will not be surprised to hear that the standard was developed by Apple in the 1980s as a competitor to Adobe's Type 1 fonts used in PostScript. This format is supported in all browsers but Internet Explorer through the CSS3 rule @font-face.
  • Open Type (OTF) is the next version of TrueType. Paradoxically, Open Type is a registered trademark of Microsoft's, so why they choose not to support it is beyond me. OTF is also supported in all other browsers.
  • Developed in 2009, the Web Open Font Format is a container with compression and additional metadata for all the other formats. The specification was submitted by Mozilla, Opera and Microsoft. And while all browsers support it (Internet Explorer 9+, FF 3.6+, Chrome, WebKit browsers, Safari, etc., they are still limited by which of the wrapped formats they can interpret. Thus, IE9 can open a woff file, if it contains EOT inside.
  • Embedded OpenType (EOT) is Microsoft's attempt at a web standard for fonts. It allows compression and has some sort of protection against copying. These little files work (somehow) since Internet Explorer 6, when CSS3 was a dream and all "modern browsers" had nothing.
  • Comparison of layout engines (web typography) - a small article discussing browser support for web typography.
  • The history of fonts - how typefaces evolved over time.
  • Intellectual property protection of typefaces

Comments

Glenn Evans

This is one of the main important factors that a web designer must take into consideration. Why is it that some writer and web designers are making fonts that are so colorful that makes it hard to read? I have no idea! Anyway, it's their style. But the question is: Are they getting sufficient traffic for their websites? Having a clean and organized images and contents for a website is very essential. Not only will they have a chance to drive traffic, but they will also engage their followers and visitors through convenient reading. Readable fonts will also make your website look better.

Glenn Evans

Siderite

Wow! Thanks for the comments, guys. Another fine example on how flaming creates useful dialog :) And you are right! I may have been overly aggressive to Abelardo there based on my own problem with people too lazy to make their sites viewable by all, instead choosing to support whatever browser makes their half-assed job look better. My problem was general, but was expressed in a very specific case only. For the record, even if I don't use IE6 anymore, I am a developer that works on web sites and I find the "if you don't use browser X, you suck!" message offensive, for whatever X and even if I feel the same! It's just one of those things that anybody thinks, but nobody should say out loud. So if you can take this little personal sensibility into account, it would help with the <0.5% percent web devs that get annoyed with that message. :) However, giving something for free does not absolve anyone of the responsibility for the quality of the product. And I believe here is where you are all wrong, as well. In my attempts to convert the files to EOT, I also found free downloadable tools. Perhaps with a little digging a command line tool can be found that can make publishing EOT files as easy as adding another line in a script file. Anyway, ending on a positive note, great idea and great job with the font!

Siderite

Sehrgut

I agree with pixelbender. As a web developer, I employ such gentle nudges towards modernity, since at this point not only design, but even proper function, often depends intimately on standards compliance. The uglier and more broken the web looks to IE6 and vintage Netscape users, the fewer of them we have to accommodate with ugly hacks. Re: "change for a free lunch", hear hear!

Sehrgut

pixelBender67

If you are still on IE6 then you are used to the ugliness that you are so accustomed to. Abbie has done a great thing here and on top of that has made it free to use, don't be that guy that asks for change after receiving a free lunch. If we want to move forward with the web, then it is of my opinion that we stop supporting IE6, IE7 and move toward a standard

pixelBender67

Abelardo Gonzalez

Well, you could have asked. But I also could have said why in my note at the top of the screen. Here's why: I have 2 jobs. And a family. And a kid that likes to go to the doctor a lot (long story). My limited amount of time is spent developing OpenDyslexic and iterating, and uploading the newest version for use on my website. Of the people who visit dyslexicfonts.com, < 0.5% use IE 6. If I choose to use all available font-embedding methods, my work load increases by a large factor. Now, on every iteration, I must convert to EOT (using a free online converter) on every iteration if it is going to match. o_O It's a lot of time. I already create every iteration as both OTF and TTF files so I can test on my wifes old ereader (no otf support) and other devices. And this isn't in vain. More people use OpenDyslexic on ebook readers than visit my website using IE6. It's simply a matter of time allocation. I could spend time adding languages and adjusting the smoothing for an even higher quality font, or spend time creating EOT files for the 1-2 IE6 visits every month.

Abelardo Gonzalez

Post a comment