Join 3,572 readers in helping fund MetaFilter (Hide)


No more bullshit. Join the font nerd revolution.
March 22, 2010 12:38 PM   Subscribe

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.
posted by dunkadunc (61 comments total) 121 users marked this as a favorite

 
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.
posted by xthlc at 12:42 PM on March 22, 2010 [1 favorite]


Nice! Thanks!
posted by Thorzdad at 12:50 PM on March 22, 2010


Nice. Thanks for this.
posted by brundlefly at 12:51 PM on March 22, 2010


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.
posted by june made him a gemini at 12:56 PM on March 22, 2010


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.
posted by Artw at 1:00 PM on March 22, 2010


*throws up*
posted by infini at 1:01 PM on March 22, 2010


(no offense, artw, you make some good points there, i'm just responding directly to the fpp)
posted by infini at 1:02 PM on March 22, 2010


Zeldman on Typekit - as he says, we are at the tipping point now.
posted by Artw at 1:03 PM on March 22, 2010


*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!
posted by filthy light thief at 1:05 PM on March 22, 2010 [2 favorites]


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.
posted by verb at 1:07 PM on March 22, 2010


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.
posted by Artw at 1:09 PM on March 22, 2010


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.
posted by Artw at 1:12 PM on March 22, 2010


We need a mechanism for these to replace expensive screen fonts automatically, or they don't do much good.
posted by mkb at 1:15 PM on March 22, 2010


I love the concept behind this and wish them well. But they need to fix the letter-spacing on a lot of those typefaces.
posted by jabberjaw at 1:17 PM on March 22, 2010


I fond the lack of actual example usages annoying. It's all images - that's pretty much the opposite of the point.
posted by Artw at 1:18 PM on March 22, 2010 [1 favorite]


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.
posted by verb at 1:20 PM on March 22, 2010


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.
posted by Artw at 1:21 PM on March 22, 2010


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.
posted by The Winsome Parker Lewis at 1:21 PM on March 22, 2010


This site came up in one of my recent AskMes. I've been using Junction and Raleway and have been quite pleased.
posted by l33tpolicywonk at 1:27 PM on March 22, 2010


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.
posted by Artw at 1:28 PM on March 22, 2010 [1 favorite]


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.
posted by The Winsome Parker Lewis at 1:31 PM on March 22, 2010


oooo i haven't had one of these since adobe bought aldus ;p
posted by infini at 1:40 PM on March 22, 2010


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.
posted by malevolent at 1:55 PM on March 22, 2010 [3 favorites]


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.
posted by treeshar at 1:58 PM on March 22, 2010 [2 favorites]


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.
posted by Artw at 2:07 PM on March 22, 2010


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.
posted by The Winsome Parker Lewis at 2:18 PM on March 22, 2010


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.
posted by Artw at 2:24 PM on March 22, 2010


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.
posted by mrmorgan at 2:35 PM on March 22, 2010 [4 favorites]


There's a font called 'sniglet'. How exciting!
posted by a womble is an active kind of sloth at 2:51 PM on March 22, 2010


Jabberjaw: A little bit of keming going on?
posted by valrus at 2:56 PM on March 22, 2010


How does one actually use these fonts?
posted by special-k at 3:46 PM on March 22, 2010


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.
posted by mrmorgan at 3:52 PM on March 22, 2010 [5 favorites]


Thanks mrmorgan, I totally appreciate that explanation!
posted by special-k at 4:03 PM on March 22, 2010


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.
posted by Artw at 4:06 PM on March 22, 2010 [2 favorites]


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!
posted by Artw at 4:11 PM on March 22, 2010


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.
posted by robertc at 4:19 PM on March 22, 2010 [2 favorites]


And in case you;re wondeirng, the CSS that does the magic looks like this...
@font-face {
	font-family: 'YourFont';
	src: url('YourFont.eot');
	src: local('Your Font'), 
	       local('YourFont'), 
	       url('YourFont.woff') format('woff'), 
	       url('YourFont.ttf') format('truetype'),
               url('YourFont.svg#YourFont-Bold') 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!
posted by Artw at 4:32 PM on March 22, 2010 [2 favorites]


Nice. These are actually kind of sexy. Will have to work some server voodoo.
posted by fluffy battle kitten at 4:41 PM on March 22, 2010


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.
posted by Wood at 5:29 PM on March 22, 2010


Now I just wish I were doing something interesting enough on the web to make it worthwhile to use new fonts.
posted by immlass at 5:41 PM on March 22, 2010


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.
posted by mrmorgan at 5:54 PM on March 22, 2010


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.
posted by brianstorms at 7:26 PM on March 22, 2010


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.
posted by verb at 11:06 PM on March 22, 2010


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").
posted by !Jim at 11:31 PM on March 22, 2010


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.
posted by robertc at 1:25 AM on March 23, 2010


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.
posted by him at 2:01 AM on March 23, 2010


Performance problems with @font-face – FOUT.
posted by i_cola at 3:42 AM on March 23, 2010


Starbucks seems to be using League Gothic and Chunk in their most recent promotional materials.
posted by johnjreiser at 8:04 AM on March 23, 2010


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.
posted by Twang at 4:15 PM on March 23, 2010


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.
posted by caution live frogs at 10:44 PM on March 24, 2010


bonding is so gay
posted by infini at 3:58 AM on March 25, 2010


yuck. i need to go take a shower and clean the house and do the dishes bla bla bla
posted by infini at 4:01 AM on March 25, 2010


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?
posted by ElGuapo at 8:02 PM on March 28, 2010


ooh, where are you seeing that?
posted by Artw at 10:47 PM on March 28, 2010


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!
posted by ElGuapo at 6:32 AM on March 29, 2010


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!
posted by ElGuapo at 6:34 PM on March 29, 2010


Hmm. I'm wondering how it got that way - possibly an over-zealous security program that messes with your settings?
posted by Artw at 6:46 PM on March 29, 2010


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
posted by ElGuapo at 7:17 PM on March 30, 2010


This statement of theirs is disappointing.
posted by mkb at 9:49 AM on March 31, 2010


That whole exchange is a bit weird. That's expressing complex ideas in 140 chars for you I guess.
posted by Artw at 10:10 AM on March 31, 2010


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.
posted by caution live frogs at 7:06 AM on April 2, 2010


« Older Is Vitamin C worth taking or not? Does Echinacea k...   |   A new study suggests that huma... Newer »


This thread has been archived and is closed to new comments