Using @font-face to unleash web typography

Beyond Arial Using @font-face to unleash web typography John Kary | johnkary@ku.edu Web Development & Interface Design University of Kansas, Information Technology September 2010 KU Web Developers Meeting

History Using @font-face Website Demo Challenges

History

History – 1996 Microsoft introduces “Core Fonts for the Web” Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Microsoft introduces “Core Fonts for the Web” Highly legible on screen Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Microsoft introduces “Core Fonts for the Web” Highly legible on screen Offer a wide range of types styles in a few typefaces Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Microsoft introduces “Core Fonts for the Web” Highly legible on screen Offer a wide range of types styles in a few typefaces Support extensive internationalization Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Andale Mono Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Arial Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Comic Sans MS Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Courier New Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Georgia Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Impact Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Times New Roman Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Trebuchet MS Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Verdana Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 Webdings Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

History – 1996 CSS1 is introduced by W3C Source: http://www.w3.org/TR/REC-CSS1/

History – 1996 CSS1 is introduced by W3C Setting font properties will be among the most common uses of style sheets. W3C Cascading Style Sheets, level 1. 5.2 Font properties. http://www.w3.org/TR/REC-CSS1/#font-properties Source: http://www.w3.org/TR/REC-CSS1/

History – 1996 CSS1 is introduced by W3C Setting font properties will be among the most common uses of style sheets. W3C Cascading Style Sheets, level 1. 5.2 Font properties. http://www.w3.org/TR/REC-CSS1/#font-properties But everyone still going crazy with Netscape’s <font> tags... Source: http://www.w3.org/TR/REC-CSS1/

History – 1996

History – 1997 Microsoft introduces Web Embedding Fonts Tool (WEFT) Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

History – 1997 Microsoft introduces Web Embedding Fonts Tool (WEFT) TrueType Font (.ttf) => WEFT => Embedded OpenType (.eot) Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

History – 1997 Microsoft introduces Web Embedding Fonts Tool (WEFT) TrueType Font (.ttf) => WEFT => Embedded OpenType (.eot) Internet Explorer 4+ supports it! Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

History – 1997 Netscape 4 supports TrueDoc by Bitstream Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

History – 1997 Netscape 4 supports TrueDoc by Bitstream Discontinued with Netscape 6 Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

History – 1997 Netscape 4 supports TrueDoc by Bitstream Discontinued with Netscape 6 Netscape 6 based on Mozilla, which was open-source Bitstream wouldn’t allow release of its source code Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

History – 1997 Netscape 4 supports TrueDoc by Bitstream Discontinued with Netscape 6 Netscape 6 based on Mozilla, which was open-source Bitstream wouldn’t allow release of its source code TrueDoc didn’t kill Bitstream... Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

History – 1997 Netscape 4 supports TrueDoc by Bitstream Discontinued with Netscape 6 Netscape 6 based on Mozilla, which was open-source Bitstream wouldn’t allow release of its source code TrueDoc didn’t kill Bitstream... WhatTheFont Source: http://www.microsoft.com/typography/web/embedding/default.aspx Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

WhatTheFont Source: http://new.myfonts.com/WhatTheFont/ Source: http://new.myfonts.com/WhatTheFont/iPhone/

History – 1998 First draft of CSS2 is introduced by W3C Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.html#h-14.3.1 Source: http://www.w3.org/TR/2002/WD-CSS21-20020802/fonts.html

History – 1998 First draft of CSS2 is introduced by W3C First mentions of @font-face appear! Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.html#h-14.3.1 Source: http://www.w3.org/TR/2002/WD-CSS21-20020802/fonts.html

History – 1998 First draft of CSS2 is introduced by W3C First mentions of @font-face appear! But disappear in CSS2.1 spec... :( Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.html#h-14.3.1 Source: http://www.w3.org/TR/2002/WD-CSS21-20020802/fonts.html

History – 2000 First CSS3 intro provided by W3C Intend to support @font-face Source: http://www.w3.org/TR/2000/WD-css3-roadmap-20000414

History – Zzzzzz Browser vendors never come to a format consensus

History – Zzzzzz Browser vendors never come to a format consensus Web fonts ﬁzzzzzzzzle...

History – Web 2.0

History – Web 2.0 Resurgence in web typography

History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery

History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery JavaScript is now the cool kid

History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery JavaScript is now the cool kid Let’s use it for everything!

History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery JavaScript is now the cool kid Let’s use it for everything! Instead of awesome, we get...

History – Web 2.0

History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

History – Last few years...

History – Last few years... CSS3 Font module is currently a medium priority by W3C Source: http://www.w3.org/Style/CSS/current-work Source: http://www.w3.org/Style/CSS/Specs/All#fonts

History – Last few years... CSS3 Font module is currently a medium priority by W3C Intend to support @font-face Follow CSS3 http://www.w3.org/Style/CSS/current-work Follow Fonts module http://www.w3.org/Style/CSS/Specs/All#fonts Source: http://www.w3.org/Style/CSS/current-work Source: http://www.w3.org/Style/CSS/Specs/All#fonts

History – Present

History – Present HTML5

History – Present HTML5 CSS3

History – Present HTML5 @font-face CSS3

@font-face

@font-face?

@font-face rule allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of "web-safe" fonts [...] allowing for consistent rendering independent of the fonts available in a given user's environment. CSS Fonts Module Level 3. 4.1 The @font-face rule. http://www.w3.org/TR/2009/WD-css3-fonts-20090618/#font-resources

@font-face

@font-face Use any font* you want on your website

@font-face Use any font* you want on your website * Any font you have the license to use...

@font-face Use any font* you want on your website * Any font you have the license to use... Relies on browser’s native font rendering

@font-face Use any font* you want on your website * Any font you have the license to use... Relies on browser’s native font rendering Good and Bad News...

@font-face – The Bad News

@font-face – The Bad News Relies on browser’s native font rendering

@font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering

@font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering Font size

@font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering Font size Aliasing

@font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering Font size Aliasing Easy to abuse

@font-face – The Good News

@font-face – The Good News Relies on browser’s native font rendering

@font-face – The Good News Relies on browser’s native font rendering Users can copy/paste your text

@font-face – The Good News Relies on browser’s native font rendering Users can copy/paste your text Text is natively visible to search-engines

@font-face – The Good News Relies on browser’s native font rendering Users can copy/paste your text Text is natively visible to search-engines More SEO-friendly <h1> <h2> tags

@font-face – The Good News No more reliance on JavaScript, let alone Flash

@font-face – The Good News No more reliance on JavaScript, let alone Flash Syntax is straight-forward and not hacky

@font-face – The Good News No more reliance on JavaScript, let alone Flash Syntax is straight-forward and not hacky OK, not hacky compared to sIFR and that junk

@font-face – The Good News No more reliance on JavaScript, let alone Flash Syntax is straight-forward and not hacky OK, not hacky compared to sIFR and that junk And maybe best of all...

@font-face – The Good News No more reliance on JavaScript, let alone Flash Syntax is straight-forward and not hacky OK, not hacky compared to sIFR and that junk And maybe best of all... Print stylesheets work!

@font-face – The Good News

@font-face

@font-face – Browser Support

@font-face – Browser Support Source: http://webfonts.info/wiki/index.php?title=Browser_support Source: Google Analytics (Sept 1-23, 2010, Referenced Sept 23, 2010)

Kinda...

@font-face – Font Formats This gets a little ugly...

@font-face – Font Formats This gets a little ugly... Currently 5 major formats

@font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font

@font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font

@font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font SVG – Scalable Vector Graphic

@font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font SVG – Scalable Vector Graphic EOT - Embedded OpenType

@font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font SVG – Scalable Vector Graphic EOT - Embedded OpenType WOFF – Web Open Font Format

@font-face – Font Format Support by Browsers

@font-face – Font Format Support by Browsers Source: http://webfonts.info/wiki/index.php?title=Browser_support

So, which browser?

So, which browser? Which format?

ALL of them! (Almost)

@font-face – Syntax

@font-face – Syntax Prevents local font of same name from rendering

@font-face – Syntax Internet Explorer 6, 7, 8 are dumb

@font-face – Syntax Load WOFF, TTF, SVG Other browsers are smart enough to use the font they need

I thought you said this was easy?

@font-face generator

http://www.fontsquirrel.com/fontface/generator

Could this be even easier?

http://code.google.com/webfonts

Website Demo

KU Internal Audit – Before

KU Internal Audit – After

Challenges

Challenges – MIME types

Challenges – MIME types Chrome & Safari inspector will throw some errors...

Challenges – MIME types Chrome & Safari inspector will throw some errors... No web browser MIME type deﬁnition for WOFF, TTF, OTF Source: http://lists.kde.org/?l=kde-core-devel&m=102236005106158&w=2

Challenges – MIME types Firefox doesn't even consider MIME-type on fonts Source: https://developer.mozilla.org/en/CSS/@font-face

Challenges – MIME types Even though there’s no MIME-type, don’t leave it up to the browser Source: http://stackoverﬂow.com/questions/3594823/mime-type-for-woff-fonts Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf

Challenges – MIME types Even though there’s no MIME-type, don’t leave it up to the browser Remember, browsers are dumb Source: http://stackoverﬂow.com/questions/3594823/mime-type-for-woff-fonts Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf

Challenges – MIME types Even though there’s no MIME-type, don’t leave it up to the browser Remember, browsers are dumb Add these to .htaccess Source: http://stackoverﬂow.com/questions/3594823/mime-type-for-woff-fonts Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf

Challenges – FOUC!

Challenges – FOUC! Flash Of Unstyled Content Source: http://stackoverﬂow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/conﬁg.shtml

Challenges – FOUC! Flash Of Unstyled Content If we don't set styles before the DOM starts loading we'll see FOUC Source: http://stackoverﬂow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/conﬁg.shtml

Challenges – FOUC! Flash Of Unstyled Content If we don't set styles before the DOM starts loading we'll see FOUC Place CSS in <head> Source: http://stackoverﬂow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/conﬁg.shtml

Challenges – FOUC! Flash Of Unstyled Content If we don't set styles before the DOM starts loading we'll see FOUC Place CSS in <head>   Source: http://stackoverﬂow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/conﬁg.shtml

Challenges – Licensing

Challenges – Licensing Not all fonts licensed for web usage Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Browser doesn’t enforce DRM (there’s no web DRM to enforce) Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Browser doesn’t enforce DRM (there’s no web DRM to enforce) Could use a font from your font folio... Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Browser doesn’t enforce DRM (there’s no web DRM to enforce) Could use a font from your font folio... You could also go download a movie from The Pirate Bay... Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

Challenges – Licensing Not all fonts licensed for web usage But font foundries have no real way to keep fonts from being used Browser doesn’t enforce DRM (there’s no web DRM to enforce) Could use a font from your font folio... You could also go download a movie from The Pirate Bay... Both are illegal Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

Challenges – Licensing Plenty of Free Font resources to choose from

Challenges – Licensing Plenty of Free Font resources to choose from http://www.fontsquirrel.com http://www.openfontlibrary.org http://code.google.com/webfonts

Challenges – Font Piracy

Challenges – Font Piracy Critics say @font-face encourages font piracy

Challenges – Font Piracy Critics say @font-face encourages font piracy Well, all my work is freely available on www.ku.edu

Challenges – Font Piracy Critics say @font-face encourages font piracy Well, all my work is freely available on www.ku.edu I even host some of my personal code on github.com/johnkary

Challenges – Font Piracy Critics say @font-face encourages font piracy Well, all my work is freely available on www.ku.edu I even host some of my personal code on github.com/johnkary I still have a job...

Challenges – Aesthetics

Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste

Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste Yields easy abuse

Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste Yields easy abuse Comic Sans?

Challenges – Aesthetics Read up on web typography

Challenges – Aesthetics Read up on web typography http://webtypography.net/intro/

Questions? Source: http://xkcd.com/590/

http://wolf.metrotype.com	36
http://static.slidesharecdn.com	2
http://www.phphatesme.com	1
https://si0.twimg.com	1

Using @font-face to unleash web typography

by John Kary

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 40

Statistics

Using @font-face to unleash web typography Presentation Transcript