SlideShare a Scribd company logo

Using @font-face to unleash web typography

•Download as KEY, PDF•
•
John Kary
John Kary

Beyond Arial: Using @font-face to unleash web typography. Contains current best practices advice on using @font-face, history of fonts on the web, browser support and font format support and challenges of @font-face. Video of this talk: http://vimeo.com/15402487

Technology
1 of 181
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 fizzzzzzzzle...
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 – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
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 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)
97.6%
97.6%
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
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax
@font-face – Syntax Prevents local font of same name from rendering
@font-face – Syntax
@font-face – Syntax Internet Explorer 6, 7, 8 are dumb
@font-face – Syntax
@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 – Syntax
@font-face generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
http://www.fontsquirrel.com/fontface/generator
Could this be even easier?
http://code.google.com/webfonts
http://code.google.com/webfonts
http://code.google.com/webfonts
http://code.google.com/webfonts
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...
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 definition 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 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://stackoverflow.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://stackoverflow.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://stackoverflow.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://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.shtml
Challenges – FOUC! Flash Of Unstyled Content If we don't set styles before the DOM starts loading we'll see FOUC Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.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://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.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> <!--set var="mycss" --> <!--set var="pagecss" --> Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.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 @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/
Challenges – Aesthetics Read up on web typography http://webtypography.net/intro/
Questions? Source: http://xkcd.com/590/

Recommended

Web Typography: Viva La Revolution!
Web Typography: Viva La Revolution!Web Typography: Viva La Revolution!
Web Typography: Viva La Revolution!Mykl Roventine
 
Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Michael Chaize
 
WebDev References
WebDev ReferencesWebDev References
WebDev Referencesdynamis
 
Firefox.NEXT
Firefox.NEXTFirefox.NEXT
Firefox.NEXTdynamis
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the webMarc Tobias Kunisch
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
Flourish2011
Flourish2011Flourish2011
Flourish2011Mark Meeker
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?Greg Veen
 

Recommended

Web Typography: Viva La Revolution!
Web Typography: Viva La Revolution!Web Typography: Viva La Revolution!
Web Typography: Viva La Revolution!Mykl Roventine
 
Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Michael Chaize
 
WebDev References
WebDev ReferencesWebDev References
WebDev Referencesdynamis
 
Firefox.NEXT
Firefox.NEXTFirefox.NEXT
Firefox.NEXTdynamis
 
new fonts for the web
new fonts for the webnew fonts for the web
new fonts for the webMarc Tobias Kunisch
 
New Web Typography
New Web TypographyNew Web Typography
New Web TypographyMonotype
 
Flourish2011
Flourish2011Flourish2011
Flourish2011Mark Meeker
 
Web Fonts: Why Bother?
Web Fonts: Why Bother?Web Fonts: Why Bother?
Web Fonts: Why Bother?Greg Veen
 
Firefox 4 & web
Firefox 4 & webFirefox 4 & web
Firefox 4 & webdynamis
 
Firefox 4 and Web
Firefox 4 and WebFirefox 4 and Web
Firefox 4 and Webdynamis
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5dynamis
 
Web Technologies
Web TechnologiesWeb Technologies
Web Technologiesdynamis
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Typeelliotjaystocks
 
Firefox 4 & THE AFTER
Firefox 4 & THE AFTERFirefox 4 & THE AFTER
Firefox 4 & THE AFTERdynamis
 
Web Standards
Web StandardsWeb Standards
Web StandardsHelior Colorado
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platformAndreas Bovens
 
ClueCon 2016: Should you use WebRTC?
ClueCon 2016: Should you use WebRTC?ClueCon 2016: Should you use WebRTC?
ClueCon 2016: Should you use WebRTC?Chad Hart
 
HTML5 & Web Platform
HTML5 & Web PlatformHTML5 & Web Platform
HTML5 & Web PlatformSwapSkills
 
The State of Web Type
The State of Web TypeThe State of Web Type
The State of Web TypeMatthew Buchanan
 
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG🎤 Hanno Embregts 🎸
 
Tool twist newsletter 2010
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010Aravind Naidu
 
The future is mostly static
The future is mostly staticThe future is mostly static
The future is mostly staticJuho Vepsäläinen
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011RZasadzinski
 
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...cresco
 
Typography online
Typography onlineTypography online
Typography onlineJake Smith
 
Web ui
Web uiWeb ui
Web uirasty4
 
Web ui
Web uiWeb ui
Web uirasty4
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5dynamis
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 

More Related Content

Similar to Using @font-face to unleash web typography

Firefox 4 & web
Firefox 4 & webFirefox 4 & web
Firefox 4 & webdynamis
 
Firefox 4 and Web
Firefox 4 and WebFirefox 4 and Web
Firefox 4 and Webdynamis
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5dynamis
 
Web Technologies
Web TechnologiesWeb Technologies
Web Technologiesdynamis
 
Firefox 4 & THE AFTER
Firefox 4 & THE AFTERFirefox 4 & THE AFTER
Firefox 4 & THE AFTERdynamis
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platformAndreas Bovens
 
ClueCon 2016: Should you use WebRTC?
ClueCon 2016: Should you use WebRTC?ClueCon 2016: Should you use WebRTC?
ClueCon 2016: Should you use WebRTC?Chad Hart
 
HTML5 & Web Platform
HTML5 & Web PlatformHTML5 & Web Platform
HTML5 & Web PlatformSwapSkills
 
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG🎤 Hanno Embregts 🎸
 
Tool twist newsletter 2010
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010Aravind Naidu
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011RZasadzinski
 
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...cresco
 
Typography online
Typography onlineTypography online
Typography onlineJake Smith
 
Web ui
Web uiWeb ui
Web uirasty4
 
Web ui
Web uiWeb ui
Web uirasty4
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5dynamis
 

Similar to Using @font-face to unleash web typography (20)

Firefox 4 & web
Firefox 4 & webFirefox 4 & web
Firefox 4 & web
 
Firefox 4 and Web
Firefox 4 and WebFirefox 4 and Web
Firefox 4 and Web
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 
Web Technologies
Web TechnologiesWeb Technologies
Web Technologies
 
The Trouble With Type
The Trouble With TypeThe Trouble With Type
The Trouble With Type
 
Firefox 4 & THE AFTER
Firefox 4 & THE AFTERFirefox 4 & THE AFTER
Firefox 4 & THE AFTER
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Opera and the Open Web platform
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform
 
ClueCon 2016: Should you use WebRTC?
ClueCon 2016: Should you use WebRTC?ClueCon 2016: Should you use WebRTC?
ClueCon 2016: Should you use WebRTC?
 
HTML5 & Web Platform
HTML5 & Web PlatformHTML5 & Web Platform
HTML5 & Web Platform
 
The State of Web Type
The State of Web TypeThe State of Web Type
The State of Web Type
 
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG
 
Tool twist newsletter 2010
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010
 
The future is mostly static
The future is mostly staticThe future is mostly static
The future is mostly static
 
Web font services: March 2011
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
 
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit...
 
Typography online
Typography onlineTypography online
Typography online
 
Web ui
Web uiWeb ui
Web ui
 
Web ui
Web uiWeb ui
Web ui
 
Keypoints html5
Keypoints html5Keypoints html5
Keypoints html5
 

Recently uploaded

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelDeepika Singh
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontologyjohnbeverley2021
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...apidays
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdfSandro Moreira
 

Recently uploaded (20)

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMECloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 

Using @font-face to unleash web typography

  • 1. 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
  • 4. History – 1996 Microsoft introduces “Core Fonts for the Web” Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 5. History – 1996 Microsoft introduces “Core Fonts for the Web” Highly legible on screen Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 6. 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
  • 7. 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
  • 8. History – 1996 Andale Mono Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 9. History – 1996 Arial Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 10. History – 1996 Comic Sans MS Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 11. History – 1996 Courier New Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 12. History – 1996 Georgia Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 13. History – 1996 Impact Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 14. History – 1996 Times New Roman Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 15. History – 1996 Trebuchet MS Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 16. History – 1996 Verdana Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 17. History – 1996 Webdings Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
  • 18. History – 1996 CSS1 is introduced by W3C Source: http://www.w3.org/TR/REC-CSS1/
  • 19. 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/
  • 20. 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/
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. History – 2000 First CSS3 intro provided by W3C Intend to support @font-face Source: http://www.w3.org/TR/2000/WD-css3-roadmap-20000414
  • 35. History – Zzzzzz Browser vendors never come to a format consensus
  • 36. History – Zzzzzz Browser vendors never come to a format consensus Web fonts fizzzzzzzzle...
  • 38. History – Web 2.0 Resurgence in web typography
  • 39. History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery
  • 40. History – Web 2.0 Resurgence in web typography All the hip kids are using Prototype and jQuery JavaScript is now the cool kid
  • 41. 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!
  • 42. 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...
  • 44. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 45. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 46. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 47. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 48. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 49. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 50. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 51. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 52. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 53. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 54. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 55. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 56. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 57. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 58. History – Web 2.0 Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions
  • 59. History – Last few years...
  • 60. 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
  • 61. 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
  • 62. 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
  • 65. History – Present HTML5 CSS3
  • 66. History – Present HTML5 @font-face CSS3
  • 69. @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
  • 71. @font-face Use any font* you want on your website
  • 72. @font-face Use any font* you want on your website * Any font you have the license to use...
  • 73. @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
  • 74. @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...
  • 75. @font-face – The Bad News
  • 76. @font-face – The Bad News Relies on browser’s native font rendering
  • 77. @font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering
  • 78. @font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering Font size
  • 79. @font-face – The Bad News Relies on browser’s native font rendering Inherit all problems of inconsistent font-rendering Font size Aliasing
  • 80. @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
  • 81. @font-face – The Good News
  • 82. @font-face – The Good News Relies on browser’s native font rendering
  • 83. @font-face – The Good News Relies on browser’s native font rendering Users can copy/paste your text
  • 84. @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
  • 85. @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
  • 86. @font-face – The Good News No more reliance on JavaScript, let alone Flash
  • 87. @font-face – The Good News No more reliance on JavaScript, let alone Flash Syntax is straight-forward and not hacky
  • 88. @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
  • 89. @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...
  • 90. @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!
  • 91. @font-face – The Good News
  • 94. @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)
  • 95. 97.6%
  • 96. 97.6%
  • 97.
  • 98.
  • 100. @font-face – Font Formats This gets a little ugly...
  • 101. @font-face – Font Formats This gets a little ugly... Currently 5 major formats
  • 102. @font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font
  • 103. @font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font
  • 104. @font-face – Font Formats This gets a little ugly... Currently 5 major formats OTF – OpenType Font TTF – TrueType Font SVG – Scalable Vector Graphic
  • 105. @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
  • 106. @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
  • 107. @font-face – Font Format Support by Browsers
  • 108. @font-face – Font Format Support by Browsers Source: http://webfonts.info/wiki/index.php?title=Browser_support
  • 110. So, which browser? Which format?
  • 111. ALL of them! (Almost)
  • 120. @font-face – Syntax Prevents local font of same name from rendering
  • 122. @font-face – Syntax Internet Explorer 6, 7, 8 are dumb
  • 124. @font-face – Syntax Load WOFF, TTF, SVG Other browsers are smart enough to use the font they need
  • 125. I thought you said this was easy?
  • 134. Could this be even easier?
  • 141. KU Internal Audit – Before
  • 142. KU Internal Audit – After
  • 145. Challenges – MIME types Chrome & Safari inspector will throw some errors...
  • 146. Challenges – MIME types Chrome & Safari inspector will throw some errors...
  • 147. Challenges – MIME types Chrome & Safari inspector will throw some errors...
  • 148. Challenges – MIME types Chrome & Safari inspector will throw some errors... No web browser MIME type definition for WOFF, TTF, OTF Source: http://lists.kde.org/?l=kde-core-devel&m=102236005106158&w=2
  • 149. Challenges – MIME types Firefox doesn't even consider MIME-type on fonts Source: https://developer.mozilla.org/en/CSS/@font-face
  • 150. Challenges – MIME types Firefox doesn't even consider MIME-type on fonts Source: https://developer.mozilla.org/en/CSS/@font-face
  • 151. Challenges – MIME types Even though there’s no MIME-type, don’t leave it up to the browser Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • 152. Challenges – MIME types Even though there’s no MIME-type, don’t leave it up to the browser Remember, browsers are dumb Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • 153. 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://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • 155. Challenges – FOUC! Flash Of Unstyled Content Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.shtml
  • 156. Challenges – FOUC! Flash Of Unstyled Content If we don't set styles before the DOM starts loading we'll see FOUC Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.shtml
  • 157. 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://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.shtml
  • 158. 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> <!--set var="mycss" --> <!--set var="pagecss" --> Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts Source: http://webtools.ku.edu/template/config.shtml
  • 160. Challenges – Licensing Not all fonts licensed for web usage Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts
  • 161. 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
  • 162. 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
  • 163. 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
  • 164. 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
  • 165. 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
  • 166. Challenges – Licensing Plenty of Free Font resources to choose from
  • 167. Challenges – Licensing Plenty of Free Font resources to choose from http://www.fontsquirrel.com http://www.openfontlibrary.org http://code.google.com/webfonts
  • 169. Challenges – Font Piracy Critics say @font-face encourages font piracy
  • 170. Challenges – Font Piracy Critics say @font-face encourages font piracy Well, all my work is freely available on www.ku.edu
  • 171. 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
  • 172. 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...
  • 174. Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste
  • 175. Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste Yields easy abuse
  • 176. Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste Yields easy abuse Comic Sans?
  • 177. Challenges – Aesthetics @font-face is easy to implement, it’s copy/paste Yields easy abuse Comic Sans?
  • 178. Challenges – Aesthetics Read up on web typography
  • 179. Challenges – Aesthetics Read up on web typography http://webtypography.net/intro/
  • 180. Challenges – Aesthetics Read up on web typography http://webtypography.net/intro/

Editor's Notes

  30. Optical Character Recognition on the image
  43. - We get an influx of hack solutions with equally hacky names - You know, where it&apos;s cool to leave out vowels
  44. Around 2005 we had Scalable Inman Flash Replacement. Uses JavaScript and Flash to replace text.
  45. Que-pho&amp;#x2019;, I guess? Takes a font, runs it through a proprietary generator called FontForge, which generates an SVG font, then is rendered by a 3-part render engine? Please.
  46. PHP + CSS? I don&amp;#x2019;t WANT my designers messing with PHP. Security nightmare. NEXT!
  47. Relies on JavaScript to &amp;#x201C;FLIR-ize&amp;#x201D; HTML. All their demos were broken on their site in Chrome, enough said.
  48. SIIR... OK
  49. sIFR 3! Still relying on server-side image replacement. Code is messy.
  50. DTR, more strategies for replacing fonts
  51. Adding .js to the end of your library apparently makes you cool, and still use JavaScript
  52. IR-ERRRR, yet another IRRR library.
  53. Now we&amp;#x2019;re combining DTR with PHP and CSS, sounds fun, right?
  54. swifr... BORDERING ON AWESOME. Not impressed... Designers and font foundries thought these were awesome, well that&apos;s cause they weren&apos;t the ones implementing them
  57. - Only a few are accessible, but ALL are a huge pain
  58. We&amp;#x2019;re developers running into huge piles of...
  67. Wait, @font-face?
  68. What the heck is @font-face?
  69. Pulled from the CSS3 spec
  71. Regardless if it&amp;#x2019;s installed on a user&amp;#x2019;s machine
  72. Well sorta. Licensing comes into play, which we talk about later
  92. So that&amp;#x2019;s @font-face, but what about browser support? We talked about native rendering of fonts... If I&amp;#x2019;ve lost you, you can start paying attention again cause now is the fun stuff
  93. Anybody want to guess our IE6 usage on www.ku.edu? 1.8 million hits, 26000 are IE6, that&amp;#x2019;s 1.5%
  97. So uhh...
  98. Mission Accomplished, right?
  99. Well, kinda... Let&amp;#x2019;s get into what it is
  115. Define @font-face once, reuse font-family multiple times
  120. OpenType spec says two-byte unicode characters don&amp;#x2019;t work in font names on a Mac, so lessons liklihood of a local font rendering in its place. You could reference a local() font which is completely different than what you think it is.
  124. Chrome 6 knows it uses WOFF, so it downloads that file.
  148. SVG has one, EOT has one
  173. Aesthetics are subjective. They&amp;#x2019;re traditionally a designer&amp;#x2019;s realm. But control is in the hands of the &amp;#x201C;non-designer&amp;#x201D; developer.