Using @font-face to unleash web typography

John Kary
John KaryWeb Application Developer
••
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%
Using @font-face to unleash web typography
Using @font-face to unleash web typography
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/
1 of 181

Using @font-face to unleash web typography

••
Download to read offline
Technology

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

John Kary
John KaryWeb Application Developer

Recommended

Web Typography: Viva La Revolution! by
Web Typography: Viva La Revolution!Web Typography: Viva La Revolution!
Web Typography: Viva La Revolution!Mykl Roventine
3.8K views•63 slides
Typography on the Web - FITC Amsterdam 2015 by
Typography on the Web - FITC Amsterdam 2015Typography on the Web - FITC Amsterdam 2015
Typography on the Web - FITC Amsterdam 2015Michael Chaize
2.3K views•51 slides
WebDev References by
WebDev ReferencesWebDev References
WebDev Referencesdynamis
3.6K views•39 slides
Firefox.NEXT by
Firefox.NEXTFirefox.NEXT
Firefox.NEXTdynamis
1.8K views•93 slides
new fonts for the web by
new fonts for the webnew fonts for the web
new fonts for the webMarc Tobias Kunisch
1.4K views•52 slides
New Web Typography by
New Web TypographyNew Web Typography
New Web TypographyMonotype
1.8K views•40 slides

More Related Content

Similar to Using @font-face to unleash web typography

Firefox 4 & web by
Firefox 4 & webFirefox 4 & web
Firefox 4 & webdynamis
1.1K views•64 slides
Firefox 4 and Web by
Firefox 4 and WebFirefox 4 and Web
Firefox 4 and Webdynamis
1K views•64 slides
Change by HTML5 by
Change by HTML5Change by HTML5
Change by HTML5dynamis
1.2K views•125 slides
Web Technologies by
Web TechnologiesWeb Technologies
Web Technologiesdynamis
804 views•96 slides
The Trouble With Type by
The Trouble With TypeThe Trouble With Type
The Trouble With Typeelliotjaystocks
4.6K views•60 slides
Firefox 4 & THE AFTER by
Firefox 4 & THE AFTERFirefox 4 & THE AFTER
Firefox 4 & THE AFTERdynamis
1.5K views•87 slides

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

Firefox 4 & web by dynamis
Firefox 4 & webFirefox 4 & web
Firefox 4 & web
dynamis •1.1K views
Firefox 4 and Web by dynamis
Firefox 4 and WebFirefox 4 and Web
Firefox 4 and Web
dynamis •1K views
Change by HTML5 by dynamis
Change by HTML5Change by HTML5
Change by HTML5
dynamis •1.2K views
Web Technologies by dynamis
Web TechnologiesWeb Technologies
Web Technologies
dynamis •804 views
The Trouble With Type by elliotjaystocks
The Trouble With TypeThe Trouble With Type
The Trouble With Type
elliotjaystocks•4.6K views
Firefox 4 & THE AFTER by dynamis
Firefox 4 & THE AFTERFirefox 4 & THE AFTER
Firefox 4 & THE AFTER
dynamis •1.5K views
Web Standards by Helior Colorado
Web StandardsWeb Standards
Web Standards
Helior Colorado•2.1K views
Opera and the Open Web platform by Andreas Bovens
Opera and the Open Web platformOpera and the Open Web platform
Opera and the Open Web platform
Andreas Bovens•875 views
ClueCon 2016: Should you use WebRTC? by Chad Hart
ClueCon 2016: Should you use WebRTC?ClueCon 2016: Should you use WebRTC?
ClueCon 2016: Should you use WebRTC?
Chad Hart•1.5K views
HTML5 & Web Platform by SwapSkills
HTML5 & Web PlatformHTML5 & Web Platform
HTML5 & Web Platform
SwapSkills•1K views
The State of Web Type by Matthew Buchanan
The State of Web TypeThe State of Web Type
The State of Web Type
Matthew Buchanan•14K views
"Will Git Be Around Forever? A List of Possible Successors" at UtrechtJUG by 🎤 Hanno Embregts 🎸
"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 🎸•255 views
Tool twist newsletter 2010 by Aravind Naidu
Tool twist newsletter 2010Tool twist newsletter 2010
Tool twist newsletter 2010
Aravind Naidu•862 views
The future is mostly static by Juho Vepsäläinen
The future is mostly staticThe future is mostly static
The future is mostly static
Juho Vepsäläinen•68 views
Web font services: March 2011 by RZasadzinski
Web font services: March 2011Web font services: March 2011
Web font services: March 2011
RZasadzinski•2K views
Students of Navgujarat College of Computer Applications, Ahmedabad felt excit... by cresco
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•1.8K views
Typography online by Jake Smith
Typography onlineTypography online
Typography online
Jake Smith•805 views
Web ui by rasty4
Web uiWeb ui
Web ui
rasty4•176 views
Web ui by rasty4
Web uiWeb ui
Web ui
rasty4•338 views
Keypoints html5 by dynamis
Keypoints html5Keypoints html5
Keypoints html5
dynamis •29.7K views

Recently uploaded

Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ... by
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...ShapeBlue
129 views•10 slides
Generative AI: Shifting the AI Landscape by
Generative AI: Shifting the AI LandscapeGenerative AI: Shifting the AI Landscape
Generative AI: Shifting the AI LandscapeDeakin University
67 views•55 slides
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueShapeBlue
224 views•7 slides
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P... by
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...ShapeBlue
196 views•62 slides
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineShapeBlue
225 views•19 slides
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...ShapeBlue
164 views•13 slides

Recently uploaded(20)

Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ... by ShapeBlue
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
Live Demo Showcase: Unveiling Dell PowerFlex’s IaaS Capabilities with Apache ...
ShapeBlue•129 views
Generative AI: Shifting the AI Landscape by Deakin University
Generative AI: Shifting the AI LandscapeGenerative AI: Shifting the AI Landscape
Generative AI: Shifting the AI Landscape
Deakin University•67 views
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue by ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlueElevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
Elevating Privacy and Security in CloudStack - Boris Stoyanov - ShapeBlue
ShapeBlue•224 views
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P... by ShapeBlue
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
Developments to CloudStack’s SDN ecosystem: Integration with VMWare NSX 4 - P...
ShapeBlue•196 views
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online by ShapeBlue
KVM Security Groups Under the Hood - Wido den Hollander - Your.OnlineKVM Security Groups Under the Hood - Wido den Hollander - Your.Online
KVM Security Groups Under the Hood - Wido den Hollander - Your.Online
ShapeBlue•225 views
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda... by ShapeBlue
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
Hypervisor Agnostic DRS in CloudStack - Brief overview & demo - Vishesh Jinda...
ShapeBlue•164 views
Optimizing Communication to Optimize Human Behavior - LCBM by Yaman Kumar
Optimizing Communication to Optimize Human Behavior - LCBMOptimizing Communication to Optimize Human Behavior - LCBM
Optimizing Communication to Optimize Human Behavior - LCBM
Yaman Kumar•38 views
Ransomware is Knocking your Door_Final.pdf by Security Bootcamp
Ransomware is Knocking your Door_Final.pdfRansomware is Knocking your Door_Final.pdf
Ransomware is Knocking your Door_Final.pdf
Security Bootcamp•98 views
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ... by ShapeBlue
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
How to Re-use Old Hardware with CloudStack. Saving Money and the Environment ...
ShapeBlue•171 views
State of the Union - Rohit Yadav - Apache CloudStack by ShapeBlue
State of the Union - Rohit Yadav - Apache CloudStackState of the Union - Rohit Yadav - Apache CloudStack
State of the Union - Rohit Yadav - Apache CloudStack
ShapeBlue•303 views
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023 by BookNet Canada
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
Redefining the book supply chain: A glimpse into the future - Tech Forum 2023
BookNet Canada•44 views
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue by ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
2FA and OAuth2 in CloudStack - Andrija Panić - ShapeBlue
ShapeBlue•152 views
Future of Indian ConsumerTech by Kapil Khandelwal (KK)
Future of Indian ConsumerTechFuture of Indian ConsumerTech
Future of Indian ConsumerTech
Kapil Khandelwal (KK)•36 views
Business Analyst Series 2023 - Week 4 Session 8 by DianaGray10
Business Analyst Series 2023 - Week 4 Session 8Business Analyst Series 2023 - Week 4 Session 8
Business Analyst Series 2023 - Week 4 Session 8
DianaGray10•145 views
Business Analyst Series 2023 - Week 4 Session 7 by DianaGray10
Business Analyst Series 2023 - Week 4 Session 7Business Analyst Series 2023 - Week 4 Session 7
Business Analyst Series 2023 - Week 4 Session 7
DianaGray10•146 views
Why and How CloudStack at weSystems - Stephan Bienek - weSystems by ShapeBlue
Why and How CloudStack at weSystems - Stephan Bienek - weSystemsWhy and How CloudStack at weSystems - Stephan Bienek - weSystems
Why and How CloudStack at weSystems - Stephan Bienek - weSystems
ShapeBlue•247 views
The Role of Patterns in the Era of Large Language Models by Yunyao Li
The Role of Patterns in the Era of Large Language ModelsThe Role of Patterns in the Era of Large Language Models
The Role of Patterns in the Era of Large Language Models
Yunyao Li•91 views
"Node.js Development in 2024: trends and tools", Nikita Galkin by Fwdays
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin
Fwdays•33 views
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue by ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlueCloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
CloudStack Managed User Data and Demo - Harikrishna Patnala - ShapeBlue
ShapeBlue•137 views
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De... by Moses Kemibaro
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Don’t Make A Human Do A Robot’s Job! : 6 Reasons Why AI Will Save Us & Not De...
Moses Kemibaro•35 views

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%
  • 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.