Comments on: No more bullshit. Join the font nerd revolution.

No more bullshit. Join the font nerd revolution.

dunkadunc — Mon, 22 Mar 2010 12:38:46 -0800

The League of Moveable Type offers a growing collection of high-quality, open-source fonts to help make the web a bit nicer to look at.

By: xthlc

xthlc — Mon, 22 Mar 2010 12:42:07 -0800

Hooray! By complete coincidence I just found this yesterday. What with growing browser support for easy alternate fonts, there's a dire need for a high-quality library of libre fonts that anyone can distribute.

By: Thorzdad

Thorzdad — Mon, 22 Mar 2010 12:50:55 -0800

Nice! Thanks!

By: brundlefly

brundlefly — Mon, 22 Mar 2010 12:51:38 -0800

Nice. Thanks for this.

By: june made him a gemini

june made him a gemini — Mon, 22 Mar 2010 12:56:24 -0800

Ah man, I had bookmarked this when they had only released the first one - they've got a great selection now. .. also I cannot express enough type-nerdery joy with every font post on the blue. I just want to hug all of you fellow wankfest-erers.

By: Artw

Artw — Mon, 22 Mar 2010 13:00:57 -0800

Heh... There goes the embedded fonts FPP I was vaguely thinking of making. There was an excellent session on type at MIX, by Jonathan Snook. The general upshot is that the technology for embedded fonts on the web via @font-face is here, is mature and useable, and the main downside is font foundries haven't really caught up and so there are all kinds of licensing issues. The League of Moveable Type gets a mention, as does Typekit. There's a generator for your own embeddable fonts here. And then there's WOFF, which looks like the future. There's some debate as to whether IE9 will be supporting it - however one of the SVG demos I saw at the conference seemed to be using it, so it seems pretty likely.

By: infini

infini — Mon, 22 Mar 2010 13:01:28 -0800

*throws up*

By: infini

infini — Mon, 22 Mar 2010 13:02:32 -0800

(no offense, artw, you make some good points there, i'm just responding directly to the fpp)

By: Artw

Artw — Mon, 22 Mar 2010 13:03:20 -0800

Zeldman on Typekit - as he says, we are at the tipping point now.

By: filthy light thief

filthy light thief — Mon, 22 Mar 2010 13:05:10 -0800

*throws up* posted by infini at 1:01 PM on March 22 [+] [!] (no offense, artw, you make some good points there, i'm just responding directly to the fpp) Yeah, I know. Fancy fonts on the internet? Terminal 4 lyfe! Lynx fo' eva!

By: verb

verb — Mon, 22 Mar 2010 13:07:38 -0800

And then there's WOFF, which looks like the future. There's some debate as to whether IE9 will be supporting it - however one of the SVG demos I saw at the conference seemed to be using it, so it seems pretty likely.

I actually had an interesting chat with the lead developer from TypeKit about the WOFF format, and a couple folks working on similar projects. The consensus seems to be that WOFF is basically Microsoft's EOT format, without the name 'Microsoft' next to it. If that's the case, it's a frustrating complication in an already complicated landscape. Regardless, the type embedding landscape has definitely been heating up lately. It's cool to see, being an old font geek.

By: Artw

Artw — Mon, 22 Mar 2010 13:09:39 -0800

Heh. Sometimes I do think that the artificial limit on body fonts on the web may have overall been a good thing. you may think the odd site in Comics Sans is bad, but consider the alternatives... Oh, and also of intereste from MIX was this talk: The Art, Technology and Science of Reading, by Kevin Larson. It's a bit more designy/science based with less technical stuff, but very interesting nonetheless.

By: Artw

Artw — Mon, 22 Mar 2010 13:12:06 -0800

EOTs are harder to copy. That's actually a plus, as far as getting foundries on board goes. Of course, if you are also supporting a bunch of browsers that don't speak EOT that's kind of lost.

By: mkb

mkb — Mon, 22 Mar 2010 13:15:05 -0800

We need a mechanism for these to replace expensive screen fonts automatically, or they don't do much good.

By: jabberjaw

jabberjaw — Mon, 22 Mar 2010 13:17:32 -0800

I love the concept behind this and wish them well. But they need to fix the letter-spacing on a lot of those typefaces.

By: Artw

Artw — Mon, 22 Mar 2010 13:18:42 -0800

I fond the lack of actual example usages annoying. It's all images - that's pretty much the opposite of the point.

By: verb

verb — Mon, 22 Mar 2010 13:20:47 -0800

EOTs are harder to copy. That's actually a plus, as far as getting foundries on board goes. Of course, if you are also supporting a bunch of browsers that don't speak EOT that's kind of lost.

That's kind of a wash already -- there's such a mish-mash of formats that you will need at LEAST three copies of every font if you want to serve the major browsers, four if you want to cover mobile. Internally, that's what TypeKit does: they do browser detection and serve up the font that will work with the browser you're using. And for them, it makes sense -- they do that ugly work once and centralize it. It's also why (I think) they sigh and rub their temples whenever someone comes out with a New And Better Web Font Format.

By: Artw

Artw — Mon, 22 Mar 2010 13:21:23 -0800

You'll also notice that the Typekit font gallery pages are all images, which is interesting. They don't want to risk a single point from which people can suck down the whole library, I expect.

By: The Winsome Parker Lewis

The Winsome Parker Lewis — Mon, 22 Mar 2010 13:21:35 -0800

I see the first font on the page, Raleway, was designed by Matt McInerney. Nice to know he has an alibi for leaving his podcast listeners hanging for over two months. Back to the topic at hand, I think this is good progress. I want to see the entire set bundled with browsers. If every Firefox user had all of these fonts, it would be a short time before the rest of the market raced to catch up.

By: l33tpolicywonk

l33tpolicywonk — Mon, 22 Mar 2010 13:27:30 -0800

This site came up in one of my recent AskMes. I've been using Junction and Raleway and have been quite pleased.

By: Artw

Artw — Mon, 22 Mar 2010 13:28:01 -0800

I want to see the entire set bundled with browsers. No. Bundling really is over, if we want to move forwards making @font-face work really is the way.

By: The Winsome Parker Lewis

The Winsome Parker Lewis — Mon, 22 Mar 2010 13:31:33 -0800

Artw: I agree, that is a better course of action. Just seems like it's been stagnant for so long, and bundling free fonts would be an immediate way out of the mire. I'm getting just a little bit tired of waiting for next-gen standards to be implemented on a wide scale.

By: infini

infini — Mon, 22 Mar 2010 13:40:26 -0800

oooo i haven't had one of these since adobe bought aldus ;p

By: malevolent

malevolent — Mon, 22 Mar 2010 13:55:42 -0800

It's ludicrous that browser makers haven't simply treated fonts like any other file type. We don't have in-browser copy protection measures for text, images, audio, video, etc., and everyone would be up in arms if it was introduced, yet for some reason fonts have been given special status.

By: treeshar

treeshar — Mon, 22 Mar 2010 13:58:32 -0800

Am I the only smart-ish geek that doesn't give a $$$#@ about fonts? I'm not saying everything should be in wing dings, but if I see another stupid rant on Ariel vs. Helvetica I might turn off the internet all together. Sometimes I think just ten or so people cared, and the rest pretend to just so they look cool and engaged in front of their friends.

By: Artw

Artw — Mon, 22 Mar 2010 14:07:00 -0800

Well... I'm guessing that if you have anything to do with the web you'd like to see the end of images as text... or of hacks like using Flash or SVG to do text in a particular font... even maybe the end of people insisting that flash is used for a site over HTML so that it matches someones comp... This potentially gets you that, and keeps the design nerds happy. And The Winsome Parker Lewis is not entirely correct - we are not waiting for the technology here - bar some minor annoyances it's all right here. Basically what's needed is the fonts and people to start using them.

By: The Winsome Parker Lewis

The Winsome Parker Lewis — Mon, 22 Mar 2010 14:18:21 -0800

Maybe my understanding of the tech isn't up-to-date. Do all the major browsers now support embedding fonts? Then I guess we're waiting for the free fonts (thanks to the League, problem solved?) and for most of the world to upgrade from IE6 and its legacy brethren? I'm still using Cufón for headers and it's a perfectly decent hack for now. But I'd love to switch to something a bit more natural as soon as it's ready for the masses.

By: Artw

Artw — Mon, 22 Mar 2010 14:24:53 -0800

Yup, as of Firefox 3.5. Opera support is apparently buggy, but it's there, and it's in Webkit. As mentioned above you have to do multiple formats, which is a pain. And if you really want to support legacy browsers you might have to double up on some Cufon like technologies... but it;s been in IE since 4 so for once that's not an issue. I would watch the Snook talk... It pretty much covers this all.

By: mrmorgan

mrmorgan — Mon, 22 Mar 2010 14:35:43 -0800

Here's a page listing who's where on support for @font-face. Font Squirrel has an awesome tool to generate all the font variants you'll need from a single TTF or OTF, along with the CSS you'll need to add. Upload the generated font kit to your server (if you have the license to do so), cut and paste the CSS and you're ready to go.

By: a womble is an active kind of sloth

a womble is an active kind of sloth — Mon, 22 Mar 2010 14:51:53 -0800

There's a font called 'sniglet'. How exciting!

By: valrus

valrus — Mon, 22 Mar 2010 14:56:16 -0800

Jabberjaw: A little bit of keming going on?

By: special-k

special-k — Mon, 22 Mar 2010 15:46:06 -0800

How does one actually use these fonts?

By: mrmorgan

mrmorgan — Mon, 22 Mar 2010 15:52:40 -0800

special-k: If you are a web designer with access to your own server: You download the font, run it through the font squirrel tool I mentioned above, upload the font kit you get to your server and edit your CSS file using the example code they give you. Then you can use the font in your CSS like any other font you use in your CSS. It does seem to slow things down if you use too much of a downloadable font on one page, but I've only ever used it for headers and it's been working fine.

By: special-k

special-k — Mon, 22 Mar 2010 16:03:59 -0800

Thanks mrmorgan, I totally appreciate that explanation!

By: Artw

Artw — Mon, 22 Mar 2010 16:06:29 -0800

If you're looking for examples of it in action vist the TypeKit homepage and try highlighting that big block of text that looks like it would probably be an image on most sites. Likewise the big heading on Font Squirrel. Here's a version of the NY Times using Typekit fonts... though to my mind their font choices come out a little spidery. For a very subtle use visit Snook.Ca... on most sites the bit that says "TIPS, TRICKS & BOOKMARKS on WEB DEVELOPMENT" would be an image or would have to have been done using Arial or Verdana or whatever, here it's text with a font applied via CSS and it looks really good. The headings, with a bit of dropshadow applied via CSS, come out really nice too.

By: Artw

Artw — Mon, 22 Mar 2010 16:11:55 -0800

The FontSquirel Font-Face kits seem like the easiest place to start - just download the zip, copy a few files, cut and paste a little CSS and away you go!

By: robertc

robertc — Mon, 22 Mar 2010 16:19:41 -0800

Here's a page listing who's where on support for @font-face. It's missing some subtleties, for instance although IE supports the @font-face rule it ignores font-weight and fonr-style. So you can't declare a single 'Raleway' font family and then specify which file supplies which variant in successive @font-face rules, you have to declare 'Raleway', 'Raleway Bold', 'Raleway Italic' and 'Raleway Bold Italic' rules (for however many variants the font has - not sure Raleway has any, just an example). The consensus seems to be that WOFF is basically Microsoft's EOT format, without the name 'Microsoft' next to it. If that's the case, it's a frustrating complication in an already complicated landscape. The EOT format is owned by Microsoft, so is unlikely to be implemented in any other browser. Meanwhile the major font foundries are completely unwilling to offer their fonts under licenses suitable for on-demand downloading on the web if the same files that can be downloaded can also be installed unchanged in a desktop OS. Therefore, something new is needed. WOFF is basically a font in a zip file with some XML licensing information, fairly lightweight for an 'obfuscated' format, and has the support of the foundries. It's ludicrous that browser makers haven't simply treated fonts like any other file type. We don't have in-browser copy protection measures for text, images, audio, video, etc., and everyone would be up in arms if it was introduced, yet for some reason fonts have been given special status. I think we do have in-browser copy protection for audio and video, otherwise I'm sure I'd be able to watch Hulu here in the UK or see NFL games live on my Linux laptop instead of 'borrowing' the XP laptop from work. Also, good fonts are deceptively hard to do, whereas there are many millions of good pictures of people's cats.

By: Artw

Artw — Mon, 22 Mar 2010 16:32:08 -0800

And in case you;re wondeirng, the CSS that does the magic looks like this...

@font-face {
font-family: 'YourFont';
src: url(/90313/No-more-bullshit-Join-the-font-nerd-revolution/rss/'YourFont.eot');
src: local('Your Font'), 
       local('YourFont'), 
       url(/90313/No-more-bullshit-Join-the-font-nerd-revolution/rss/'YourFont.woff') format('woff'), 
       url(/90313/No-more-bullshit-Join-the-font-nerd-revolution/rss/'YourFont.ttf') format('truetype'),
               url(/90313/No-more-bullshit-Join-the-font-nerd-revolution/rss/'YourFont.svg) format('svg');
}

You can see the above mentioned multiple file types... a pain in the ass, but you're only going to want to do this once or twice per site and there are tools that help. And they give you multiple levels of fallback here, including SVG and, should you have it installed, a local version of the font (both the fonts name and the postscript name have to be used... again, browser differences). When you want to use the font it;s like this...

H2, P {
font-family: YourFont';
}

...and there you go!

By: fluffy battle kitten

fluffy battle kitten — Mon, 22 Mar 2010 16:41:04 -0800

Nice. These are actually kind of sexy. Will have to work some server voodoo.

By: Wood

Wood — Mon, 22 Mar 2010 17:29:44 -0800

I think we do have in-browser copy protection for audio and video, otherwise I'm sure I'd be able to watch Hulu here in the UK or see NFL games live on my Linux laptop instead of 'borrowing' the XP laptop from work. Hulu is flash of course. I'm sure the NFL is the same. What do the cats have to do with anything? That's literally insult to injury to any photographer who wonders why their work is treated as worth less than fonts by browser vendors.

By: immlass

immlass — Mon, 22 Mar 2010 17:41:12 -0800

Now I just wish I were doing something interesting enough on the web to make it worthwhile to use new fonts.

By: mrmorgan

mrmorgan — Mon, 22 Mar 2010 17:54:16 -0800

immiass, everything's interesting enough. It literally took me five minutes to make a site use custom fonts instead of Whatever People Have on Their Computer. It's fun to try and I cannot recommend doing so enough.

By: brianstorms

brianstorms — Mon, 22 Mar 2010 19:26:07 -0800

My only grumble with this is that I was hoping it was a community effort to work on the MovableType blogging software. Alas. TheLeagueofMovableType is not about MT, and their blog runs on Tumblr. If only MT had the thriving third-party community that WordPress has.

By: verb

verb — Mon, 22 Mar 2010 23:06:13 -0800

What do the cats have to do with anything? That's literally insult to injury to any photographer who wonders why their work is treated as worth less than fonts by browser vendors.

I think that the difference is all about timing. When the IMG tag and FONT tags were added, there were widely accepted cross-platform image formats, NO widely accepted cross-platform font formats, and fonts were usually consistently named on a given platform. The FONT tag let you specify what font (or font category) something would appear in, while the IMG tag let you specify a link to a media resource somewhere on the Internet. By the time the idea of embedding fonts was on anyone's radar and cross-platform font formats existed, well... foundries were already taking stabs at it (If you remember 'TrueDoc' give a shout out!) and Microsoft did their thing with the EOT format. Simply put: the first entrants onto the font embedding scene were players very, very concerned about licensing. The first entrants onto the image embedding scene were very, very concerned that they could make the word "NEW!" rotate on an orange lozenge. Everything else flows from that.

My only grumble with this is that I was hoping it was a community effort to work on the MovableType blogging software. Alas. TheLeagueofMovableType is not about MT, and their blog runs on Tumblr. If only MT had the thriving third-party community that WordPress has.

Yeah. MT went through a few cycles of open/closed/open/closed/pay/free/pay/free, and it took them a long time to come around to the fully dynamic 'cycles are cheap' approach that drives most labor-of-love low-traffic personal blogs. They lost the tinkery hobbyists to so-so GPL projects, and eventually the so-so GPL projects got good enough that midrange people started converting and the rest is history. They've since GPL'd the MT codebase, but I think they lost a huge amount of momentum and it would take a miracle to really regain their momentum outside of large corporate blogging environments.

By: !Jim

!Jim — Mon, 22 Mar 2010 23:31:51 -0800

One thing that I'm really starting to notice a lot on sites using web-fonts is that Windows' font smoothing is absolute terrible at large sizes. This isn't just Mac fanboyism (I use Linux, OS X and Windows 7, and like all of them for varying reasons), and I'm okay with Windows' font rendering at smaller sizes, but once it gets above maybe 30 or 40 something, it really starts to look awful. One thing that was interesting to note in the IE9 screenshots that are going around now, is that the hardware-assisted font rendering does not seem to have this issue (CTRL+F for "font").

By: robertc

robertc — Tue, 23 Mar 2010 01:25:19 -0800

What do the cats have to do with anything? It was an internet meme reference to make me appear hip and cool. That's literally insult to injury to any photographer who wonders why their work is treated as worth less than fonts by browser vendors. No, because professional photographers don't usually put full resolution versions of their images online for anyone to include in their web pages. Font foundries are doing the same thing, but we notice it more because there are far fewer amateur font designers willing to share their hobby work for free, and who's work is actually useful, than there are amateur photographers. For instance, a font needs at least 652 characters designed for it to be usable as on main body text of a website with a European audience.

By: him

him — Tue, 23 Mar 2010 02:01:09 -0800

mrmorgan: Here's a page listing who's where on support for @font-face. Which, ironically, seems to crash the version of Safari I'm running. Doh.

By: i_cola

i_cola — Tue, 23 Mar 2010 03:42:36 -0800

Performance problems with @font-face – FOUT.

By: johnjreiser

johnjreiser — Tue, 23 Mar 2010 08:04:09 -0800

Starbucks seems to be using League Gothic and Chunk in their most recent promotional materials.

By: Twang

Twang — Tue, 23 Mar 2010 16:15:53 -0800

Glad to see this *finally* starting to happen. Fonts are as essential to the feel of a page as soundtracks are to the feel of a film. Another web feature finally moving into the 20th century. Like health care.

By: caution live frogs

caution live frogs — Wed, 24 Mar 2010 22:44:32 -0800

I was inspired enough to update the fonts on my own site. EOT, TTF/OTF and SVG. Looks fine in Firefox and Safari, even on my iPhone. Haven't had a chance to see how it looks on Windows yet. Annoyed that I can't just declare one font family and then define italic/bold later on. Not sure if it's worth doing, unless I really feel like adding CSS declarations to tell IE that italic text is italic and should use an italic font... anyone stuck using that cruddy browser can just see my pretty new fonts rendered as obliques, instead of the true italics that appear for other folks. Don't get mad at me, blame the IE programmers. There's absolutely no reason I should encumber my code with yet more redundant markup to make up for the failings of the good people at Microsoft.

By: infini

infini — Thu, 25 Mar 2010 03:58:52 -0800

bonding is so gay

By: infini

infini — Thu, 25 Mar 2010 04:01:35 -0800

yuck. i need to go take a shower and clean the house and do the dishes bla bla bla

By: ElGuapo

ElGuapo — Sun, 28 Mar 2010 20:02:21 -0800

I would love to be standing on top of this bandwagon waving a flag and shouting "Victoire!" but despite the "no more bullshit" headline, this is effectively still bullshit. When your average Jack or Jill navigates to a site and sees:

This page uses fonts that need to be temporarily installed.  This is usually safe.  Do you want to allow these fonts to be downloaded?

...for ***every*** page load --- they will not be staying on that site for long. Yes, Jack & Jill are using IE. Yes Jack & Jill are probably on XP. Yes, Jack & Jill pay my bills. Web accessible fonts are still pie-in-the-sky bullshit. unless I'm doing it wrong. please tell me I'm doing it wrong?

By: Artw

Artw — Sun, 28 Mar 2010 22:47:42 -0800

ooh, where are you seeing that?

By: ElGuapo

ElGuapo — Mon, 29 Mar 2010 06:32:16 -0800

IE 8, on a work-in-progress Wordpress theme (not public). Not seeing it in IE7 on a different PC, or in FF/Chrome/Safari. Maybe it's my own IE privacy settings? I will experiment tonight and post results... I *so* want this to work!

By: ElGuapo

ElGuapo — Mon, 29 Mar 2010 18:34:47 -0800

Good news! In IE Options -> Security Settings -> Downloads there's a setting for "Font download [Disable|Enable|Prompt]" - it was set to "Prompt" on my machine. A little googling seems to indicate that "Enable" is the default for Medium Security/Internet Zone. Damn computers do what they're told. I retract my previous broad characterization. I'm looking forward to making good use of this. Thanks for the links and tips!

By: Artw

Artw — Mon, 29 Mar 2010 18:46:25 -0800

Hmm. I'm wondering how it got that way - possibly an over-zealous security program that messes with your settings?

By: ElGuapo

ElGuapo — Tue, 30 Mar 2010 19:17:56 -0800

More likely I did it to myself, years ago* on a random quest for discovery -- "What's this setting for? I didn't know you could tell a browser to download fonts!!?! OOH I KNOW! I'll set this to Prompt so I can tell when a website is using embedded fonts and I'll peep their css and maybe learn something new." -- I've since learned that there is no holy grail and blindly copying somebody else's technique most often just inherits their (imperfect) assumptions. *this pc is a 3.06Ghz p4 with HT, thanks very much. Built it myself around the turn of the century

By: mkb

mkb — Wed, 31 Mar 2010 09:49:52 -0800

This statement of theirs is disappointing.

By: Artw

Artw — Wed, 31 Mar 2010 10:10:04 -0800

That whole exchange is a bit weird. That's expressing complex ideas in 140 chars for you I guess.

By: caution live frogs

caution live frogs — Fri, 02 Apr 2010 07:06:32 -0800

So Firefox won't let me use fonts that are stored on a server outside the domain in which my site resides - so what? Either I have access to the server and can upload fonts locally, or I don't have access and can't do so. Not a big deal. It means that if I do post some fonts to my server, some leech with no bandwidth of his or her own can't hotlink to them.