Warning: This is a live blog post. I’ll be typing as it happens. Expect typos, mistakes and my own distinctive interpretation of the night’s events.
A few quick announcements from Ben Dodson
- Next month’s talk is an accessibility talk
- If you’re looking for work, contact @bendodson and he can direct you to someone who is hiring
- We might do stickers so everyone knows one another’s names (next time)
- We are a social group, we’re all about everyone talking to one another (we’re not just lectures)
Ben Weiner takes the stage
(You can find a transcript of Ben’s talk on his website.)
Ben has been waiting for web fonts, like most of us, for some time. He’s going to take us on a quick ramble through web fonts.
What is a “web font”?
Anything that is recognisably a font transferred over the net for rendering text on the page.
Only two people at this event (other than Ben) are currently using web fonts.
What is a “font”?
“A font is a computer file that contains the information to create images of letters.”
Fails to convey some of the essential and intangible qualities of a font. For example, the spacing on every side of a letter.
Thousands of hours of go into the creation of a font. Deciding on spacing is more a question of visual judgement rather than scientific rules.
There are a variety of type forms: diacritics, ligatures and non-Latin scripts.
After character outlines are correct and spacing has been tweaked, there are hours of testing. Type hinting is used to make the outlines look good.
Fonts also come in families. Not just regular, bold, italic and bold italic. There are often 4 times that amount.
Ben recommends Font Bureau.
Why do we want to burn the network with all this extra data?
A brief history of web fonts
FONT FACE only had access to fonts on the users computers. At CERN, a large numer of fonts weren’t needed. But early on designers were coming to web design…
Microsoft provided the first solution by providing fonts with Core Fonts for the Web. They were even available on their website for download.
1999 vs 1866 – there were more fonts available for print than for online (broadside and a screenshot of webmonkey).
An early W3C web fonts draft was incorporated into CSS2.
Idea of using desktop font formats was rejected because the file could be easily copied.
Microsoft had Embedded Open Type (EOT) since IE 4.
Netscape 4 had TrueDoc and Portable Font Resource (PFR). This vanished quickly.
These techniques both failed to take root. What killed them off?
To send a font to a browser, you needed a license. Font vendors temporary licenses made this impossible.
A decade of type hacks
Using a picture of text. Anyone who couldn’t see the image had no idea what was being communicated. He includes Flash-driven sites in this.
Less stupid hack: FIR – great way to create cock-ups when the copy gets changed.
Clever hacks: sIFR – the first mainstream technique that works with content management systems. Recognises that text might change once code monkeys leave.
The cleverest of the hacks: retrieve outline of the fonts from the web server and render them in the browser. (Cufon)
Question (Justin): How much bandwidth do they take up?
A: Could be over a megabyte, could be 48K.
They render with the canvas element.
Someone in the audience makes the point that web fonts are probably better supported than canvas.
There is agreement that the way to specify the font you want to see on the page is via CSS. Cufon introduces its own techniques and this is a bit naughty.
Cufon doesn’t handle non-Latin fonts very well, but typeface.js seems to do a better job. Same goes for Latin ligatures (but this actually turns out to be Firefox understanding ligatures).
None of the above use real fonts.
@font-face does and is a W3C recommendation – same technique recommended in CSS2.
Interesting that OSX tries to use a font already on your file system rather than downloading it from the web.
You can pull in a font from a web server and back it up with a web-friendly font stack.
Example New York Times Skimmer uses Cheltenham.
Is there an impact on the server? You can add access restrictions (e.g. referrer checking) to prevent people downloading your font.
Cross Origin Resource Sharing – use “Access-Control-Allow-Origin” in Apache.
BBC’s Urdu site is real text, but some browsers struggle to render it.
But… Foundries still aren’t playing ball.
Licensing is an issue.
Adding webfonts can significantly change the bandwidth profile of the site. Average size of a Latin font file (35K). One for each font family variant (regular, bold, italic, small caps, etc.).
Flashes of unstyled text – Firefox displays a fallback font. Safari displays no characters until the font file downloads.
Font families: use font-weight and font-style to distinguish between family members.
Guess what? IE doesn’t seem understand @font-face at all (just font-family and src). You basically can’t build a font-family.
Teething problems are attracting attention:
- Flash of unstyled text – Paul Irish has a solution
- Deciding which font family is selected – Firefox knows what it’s doing, other browsers struggling
No established business model for selling web fonts. Some startups are addressing this.
“Crap fonts are not impressive creative works, they are just crap.”
Free fonts don’t usually compete with professionally created fonts, so it’s worth paying for a font.
Web Open Font Format – proposed in the summer of last year.
What about Microsoft? prepared to commit to WOFF when foundries support it as well. Feels like progress.
Web Fonts Working Group at the W3C is expected to support WOFF.
WOFF obfuscates itself, unlike desktop fonts.
Spiekermann and the FontShops endorse the WOFF specification – this is a major breakthrough.
WOFF is compressed, but not encrypted.
Where can you get good web fonts now?
You can get good fonts now:
- typotheque ?
- typekit – a lot of press
- font squirrel – quality free fonts
- Open Font Library – site will be relaunched soon
How do I get started?
Expect things to degrade, but not always gracefully. You can use Font Squirrel’s generator.
You can fiddle with heading styles. Just one font family member gets around IE’s failures.
Appreciate difference in size in Microsoft Core font (Georgia is the worst) and your chosen font or it will bite you in the arse.
It may be best to forget about supporting IE altogether.
Good light touch introduction: Spruce it Up by Jonathan Snook.
You can use a CSS cascade to include Embedded Open Type, WOFF, TrueType files. Again, see Font Squirrel’s generator for a good example of this that works (even in IE!).
Final point: unless you license allows it, you can’t reencode a font file.
Widely predicted: a rash of poorly chosen fonts with missing characters. Ben doesn’t think this will happen.
Browser vendors should agree on how the @font-face rules should be interpreted. IE 9 may be the first full implementation from Microsoft (there’s apparently a rumour floating around to this effect).
Maturing of font hosting services – typotheque, typekit, Open Font Library.
Question and Answer
Q: Didn’t microsoft submit EOT to the W3C to become a standard? What happened with that?
A: There were issues with it being proprietary. By the time it got the W3C, they were looking at something that wasn’t EOT anymore.
Q: Can I overwrite a user stylesheet that specifies Comic Sans.
A: An edge case, but it would be nice to have a whole evening when we could discuss ways to dick people over.
Q: What is the WOFF standard like? Sounds like it’s binary and not very easy to inspect.
A: WOFF takes all the tables from an Open Type font and replaces them in a new file. It’s a very light obfuscation.
Q: Do you think there will be take up of WOFF?
A: I think there will be more and more younger foundries that offer web fonts because that’s the world they grew up on, that’s the air they breath.
Q: Can I get properly hinted fonts for the web (as good as Core Web Fonts)?
A: There aren’t many fonts out there. They tend to be the fonts commissioned by the operating systems. For example, Droid fonts. But there’s no reason that a good font can’t work well on the screen.
Q: There are two approaches to font rendering the Microsoft (ClearType) way and the Apple / FreeType way?
A: ClearType tries to render a font taking into account the limitations of the screen. Apple and FreeType, on the other hand, try to represent the shape of the within the pixel grid.
Q: Cufon splits the letters of words into span tags. This means that Apple VoiceOver reads each letter.
A: I thinks that’s correct. Letters in a span tag are separate things.