Using @font-face to unleash web typography
Upcoming SlideShare
Loading in...5
×
 

Using @font-face to unleash web typography

on

  • 3,711 views

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

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

Statistics

Views

Total Views
3,711
Views on SlideShare
3,670
Embed Views
41

Actions

Likes
3
Downloads
28
Comments
0

5 Embeds 41

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Optical Character Recognition on the image <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • - We get an influx of hack solutions with equally hacky names <br /> - You know, where it&apos;s cool to leave out vowels <br />
  • Around 2005 we had Scalable Inman Flash Replacement. Uses JavaScript and Flash to replace text. <br />
  • Que-pho&#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. <br />
  • PHP + CSS? I don&#x2019;t WANT my designers messing with PHP. Security nightmare. NEXT! <br />
  • Relies on JavaScript to &#x201C;FLIR-ize&#x201D; HTML. All their demos were broken on their site in Chrome, enough said. <br />
  • SIIR... OK <br />
  • sIFR 3! Still relying on server-side image replacement. Code is messy. <br />
  • DTR, more strategies for replacing fonts <br />
  • Adding .js to the end of your library apparently makes you cool, and still use JavaScript <br />
  • IR-ERRRR, yet another IRRR library. <br />
  • Now we&#x2019;re combining DTR with PHP and CSS, sounds fun, right? <br />
  • swifr... BORDERING ON AWESOME. Not impressed... <br /> <br /> Designers and font foundries thought these were awesome, well that&apos;s cause they weren&apos;t the ones implementing them <br />
  • <br />
  • <br />
  • - Only a few are accessible, but ALL are a huge pain <br />
  • We&#x2019;re developers running into huge piles of... <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Wait, @font-face? <br />
  • What the heck is @font-face? <br />
  • Pulled from the CSS3 spec <br />
  • <br />
  • Regardless if it&#x2019;s installed on a user&#x2019;s machine <br />
  • Well sorta. Licensing comes into play, which we talk about later <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • So that&#x2019;s @font-face, but what about browser support? <br /> We talked about native rendering of fonts... <br /> If I&#x2019;ve lost you, you can start paying attention again cause now is the fun stuff <br />
  • Anybody want to guess our IE6 usage on www.ku.edu? <br /> 1.8 million hits, 26000 are IE6, that&#x2019;s 1.5% <br />
  • <br />
  • <br />
  • <br />
  • So uhh... <br />
  • Mission Accomplished, right? <br />
  • Well, kinda... <br /> Let&#x2019;s get into what it is <br /> <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Define @font-face once, reuse font-family multiple times <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • OpenType spec says two-byte unicode characters don&#x2019;t work in font names on a Mac, so lessons liklihood of a local font rendering in its place. <br /> You could reference a local() font which is completely different than what you think it is. <br />
  • <br />
  • <br />
  • <br />
  • Chrome 6 knows it uses WOFF, so it downloads that file. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • SVG has one, EOT has one <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Aesthetics are subjective. They&#x2019;re traditionally a designer&#x2019;s realm. <br /> But control is in the hands of the &#x201C;non-designer&#x201D; developer. <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Using @font-face to unleash web typography Using @font-face to unleash web typography Presentation Transcript

  • 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/