Web Font Replacement

04/10/23HUGE / ParentsConnect / 1

HUGE45 Main Street, 2nd Floor NY NY 11201718.625.4843 www.hugeinc.com

Font replacement

Fonts for the web

August 11th, 2009

HUGE / New Browsers 2

The problem:

• We need to support our designers and know what we can and shouldn’t compromise

• CSS image replacement is tiring and not always the best solution

Font replacement

HUGE / New Browsers 3

Methods: @font-face

Pros

• CSS awesome and easy

• @font-face {

font-family:"Fontin Sans";

src: url("FontinSansR.ttf");

}

h1 {font-family:”Fontin Sans", "Trebuchet MS", sans-serif;}

Font replacement

HUGE / New Browsers 4

Methods: @font-face

Cons

• Licensing, licensing, licensing!

• Limited compatibility

Font replacement

https://developer.mozilla.org/index.php?title=En/CSS/%40font-face

HUGE / New Browsers 5

Methods: sIFR (Javascript, Flash)

Pros

• Non-intrusive scripting

• Good type handling

• Degrades well

• Legal since font is contained in the SWF object

• Text is selectable

Cons

• Requires flash

• Sometimes load time issues

• FOUC (Flash of unstyled content)

Font replacement

HUGE / New Browsers 6

Font replacement

Methods: Facelift, aka FLIR (Javascript, PHP)

Pros

• Easy to configure

• Legal since font is rendered as an image

Cons

• Requires PHP and the GD library

• Can’t select the text

• Type not always rendered to precision

• Requires additional server resources to process

HUGE / New Browsers 7

Font replacement

Methods: Cufon (Javscript, Canvas, VML)FontForge script converts font file to SVG font. SVG font converted to VML

paths, then converted to JSON

Pros

• Easy to configure

• Has best load time performance

• Supports .otf and .ttf files

Cons

• Selecting text is difficult

• “EULA prohibits the embedding of font data in any vector format, which alas includes SVG… Cufon violates paragraphs 1 and 3.1 of our EULA…” – Jonathe Hoefler, Hoefler & Frere-Jones

HUGE / New Browsers 8

Font replacement

HUGE / New Browsers 9

Font replacement

So…

sIFR – if we care about licenses Cufon – if we don’t

HUGE / New Browsers 10

Font replacement

But…

http://www.slideshare.net/paul.irish/rich-typography-options-for-the-web

HUGE / New Browsers 11

Font replacement

Alternatives: what else is there?

• TypeKit

• FONTSMACK

• The Future – Discussions from Typecon 2009

HUGE / New Browsers 12

Font replacement

Alternatives: TypeKit (Javascript, …?)

Pros

• Doesn’t require flash

• Working with foundries to develop a consistent web-only font linking license

• Will attempt to protect

Cons

• Not here yet!

• Price?

HUGE / New Browsers 13

Font replacement

Alternatives: FONTSMACK (Javascript, Flash)

Pros

• Pre-generated flash SWFs for sIFR

• Removes dependency for Flash software

Cons

• Website is messed up

• Legal issues? Removed commercial fonts…

• Load time performance?

HUGE / New Browsers 14

Font replacement

Alternatives: The Future

Web font services

• TypeKit - TBD

• Fontdeck - TBD

• Kernest!!! - $15/year/website

HUGE / New Browsers 15

Font replacement

Alternatives: The Future

.webfont (proposed)

• A zipped file that contains the font data and an XML file with meta data, such as permissions on which websites the font can be used

• Foundries support, but will take years

HUGE / New Browsers 16

Font replacement

Alternatives: The Future

EOT Lite - .EOT font format (proposed)

• Since IE4, a font format that enables real fonts to be temporarily embedded in web pages

• Based on TTF and OTF, with additional information – reader can see font to view the page, but cannot download/steal the font afterwards

• Currently, EOT is a product of IE’s proprietary compression (by Monotype Imaging) and URL-binding (DRM) technology

• Didn’t gain enough support

• So… EOT Lite? Will remove URL-binding & proprietary compression?

• Just a renamed TTF file?

http://readableweb.com/jeffrey-zeldman-questions-the-eot-lite-web-font-format/

HUGE / New Browsers 17

Font replacement

Alternatives: The Future

Permissions table (proposed)

• @font-face w/o DRM or intermediary hosted licensing, allows designer to license their work directly for web use

• Standard for current browsers to install/remove fonts invisibly

• Make future browsers more intelligent for @font-family

• Proposed table can help by containing the links from which the fonts came, and determine their cacheability based on the user’s browsing history

HUGE / New Browsers 18

Font replacement

Solution as of today?

• Compromise with your designer!System fonts = speed & accessibility

• Check out the free fonts for @font-family:- http://webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding- http://webfonts.info/wiki/index.php?title=Commercial_foundries_which_allow_%40font-face_embedding

• Limited sIFR use