Welcome to my blog, @font-face
A few days ago, a colleague of mine mentioned that the font I was using on my blog looked borderline ugly on Linux. Here’s a screen shot:
As you can see, the uneven glyphs make it look goofy and certainly hard to read. The problem was that I used a font that seems to be present on many Mac and Windows computers, but was unavailable on my colleague’s Linux box. His browser tried to substitute it with a different font — with limited success.
So I decided to use a nifty little web feature called @font-face that allows me to define and embed my desired fonts into the website. Ideally, every browser on every platform will download the fonts I am using, and display my blog the way it is intended to look. The fonts I am using now are called Goudy Bookletter 1911 (for the headings) and Droid Serif (for the text).
I hope you like the new fonts and find them pleasant to read. If you notice any problems, however, please let me know!
Thanks for the hint, Lars, and thanks to all commenters for providing valuable feedback!
Bad news – XPs Cleartype font rendering takes chunks out of horizontal sections of many letters. For example “His browser tried” looks like “I Iis browser tried”.
Oh no! I’ll seriously give up soon and render my entire blog in Helvetica
Thanks, anyway, and I’ll see if I find the problem.
While I think having the possibility to use @font-face, I wonder if that might result in too many web sites defining their own personal favorite fonts, thus resulting in users having to download and store(?) a huge number of font files. How large is each font file?
The main text font on your blog looks splotchy and hard to read on my PC (Win7, latest Firefox nightly).
BTW: As an American living in Germany, I enjoyed browsing through your blog and reading you wife’s article on the lack of brown sugar in Germany. A very insightful and entertaining blog on America-for-Germans is USA Erklärt: http://usaerklaert.wordpress.com/
Wow, really like that font. Must … update … blog … design!!
Oh, Windows’ font rendering is so infamously bad, I should have known
Apologies. I’ll fix it shortly, and test it on all three platforms.
Thanks for the compliment about the brown sugar article, I’ll pass it on
I am wondering for some time now about the licensing issues of web fonts. Because if someone pay for a personal/commercial usage of one font, the author may not like the idea that his fonts are distributed widely be his clients without paying him more royalties and thus allowing other users to get and use fonts which in other cases won’t be available to them.
The same issue goes with free fonts licensed under Creative Commons, GPL and other open source licenses. I am not using these fonts because I am not sure how the licenses cover this kind of font distributions.
On windows xp/firefox3.6, all the letters look like they have vertical white line going right down the middle. The serif font size is set at 16 in prefs, and minimum font size is 12. I have to manually zoom the page twice with ctrl-+ to get the letters to be fully rendered (and even then they’re not really smooth). And the plus sign (+) in the previous sentence looks like just a thin vertical bar (horz crossbar has gone missing).
hmmm… never even recognized that there was something wrong with the font, but thanks anyways
With GDI rendering it’s quite terrible, it’s much better under DirectWrite but still a bit strange looking. Although making it slightly larger gets rid of those issues.
GDI: http://localhostr.com/files/d5aa50/gdi-fredericiana.png
DirectWrite: http://localhostr.com/files/cddfe0/dw-fredericiana.png
I think the problem with the Linux system was due to it’s hinting setting, strong hinting with a font with strange hints will result in that (I’ve seen the exact same thing on Windows with certain fonts)
Thanks for the help, guys! While I can live with the headings looking slightly less fancy on Windows, I’m inclined now to use Droid Serif for the text instead. That font was intentionally made for poorer displays on mobile devices and thus as a side effect seems to render acceptably on Windows.
The headings look disgusting while the text IMHO seems to render fine on Firefox 3.5/Windows XP/Cleartype.
Tomer: You have a very valid point there, font licensing is an important issue when using @font-face. For example, even if a font comes with your operating system (say, if you use a Mac and want Windows users to see that same font), you can’t just redistribute it on your website without worrying about licensing.
I am not a lawyer, but as it is an interesting topic I think I will write a follow-up post on font licensing considerations.
Mr. Lairo,
Firefox renders this page fine before the font file downloads, and then it “snaps” into the desired font, very cool.
Too many web sites already define their own look and feel, requiring the user to download and cache a huge number of CSS files. Oh noes!
Instead of wondering how big the files are, it’s an open web, you can easily find out.
45934 DroidSerif-Bold.eot
40872 goudy_bookletter_1911.eot
112216 goudy_bookletter_1911.svg
40636 goudy_bookletter_1911.ttf
21492 goudy_bookletter_1911.woff
Firebug can tell you which of the goudy formats Firefox actually downloads. I don’t know if these font files have a subset of glyphs to reduce filesize.
skierpage: Firefox 3.6 downloads only the .woff files (coincidentally these are also the smallest of the files), other browsers prefer other versions. Yes, these files use a subset of their glyphs to reduce file size. My server also serves them gzipped, and I have far-future expires headers set, so returning readers won’t have to download the files again for a while.