• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
What the @font-face
 

What the @font-face

on

  • 12,531 views

Practical steps for using @font-face in your websites now

Practical steps for using @font-face in your websites now

Statistics

Views

Total Views
12,531
Views on SlideShare
6,858
Embed Views
5,673

Actions

Likes
6
Downloads
34
Comments
0

7 Embeds 5,673

http://unmatchedstyle.com 3124
http://www.unmatchedstyle.com 2502
http://www.slideshare.net 29
http://webcache.googleusercontent.com 8
http://translate.googleusercontent.com 5
http://zootool.com 4
http://fever.z720.net 1
More...

Accessibility

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 />
  • CSS2 finished in 1998 <br />
  • - let you figure that one out <br /> images - hard to maintain, not as accessible, potentially large <br /> web fonts - limited # of fonts, but the way it&#x2019;s done today, in conjunction with cufon <br />
  • FF3 released 6/08, FF 3.5 released 6/09, matter of months will be smaller. Chrome is growing, but new installs will support. Seems to have slower uptake. Is it a client site or personal? Who is the audience? Will your client understand if things don&#x2019;t look exactly the same everywhere? <br />
  • colamovies jan 2010. Important to look at your stats. <br />
  • colamovies jan 2010. Important to look at your stats. <br />
  • colamovies jan 2010. Important to look at your stats. <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 />
  • <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 /> <br />

What the @font-face What the @font-face Presentation Transcript

  • What is @font-face? • CSS2 rule • Allows embedding of fonts through css • Access hosted fonts instead of relying on user’s installed fonts
  • What’s the big deal? • Rely on native browser rendering, the same as with web safe fonts • Cufon/sifr great but css support is incomplete, plus relies on javascript • It’s easy • Print stylesheets work with @font- face
  • Can we use it?
  • colamovies.com 28,766 Visitors
  • midlandsbiz.com 10,253 Visitors
  • unmatchedstyle.com 35,400 Visitors
  • With great power comes great responsibility • @font-face makes knowledge of typography even more important • great design has been done with only web-safe fonts
  • Not so fast!
  • So how do you do it? @font-face { font-family: 'PTSansRegular'; src: url('PT_Sans.eot'); src: local('PT Sans Regular'), local('PTSans-Regular'), url('PT_Sans.woff') format('woff'), url('PT_Sans.ttf') format('truetype'), url('PT_Sans.svg#PTSans-Regular') format('svg'); } p { font-family: "PTSansRegular", Helvetica, Arial, sans-serif; } Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  • So how do you do it? @font-face { font-family: 'PTSansRegular'; src: url('PT_Sans.eot'); src: local('PT Sans Regular'), local('PTSans-Regular'), url('PT_Sans.woff') format('woff'), url('PT_Sans.ttf') format('truetype'), url('PT_Sans.svg#PTSans-Regular') format('svg'); } p { font-family: "PTSansRegular", Helvetica, Arial, sans-serif; } Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  • So how do you do it? @font-face { font-family: 'PTSansRegular'; src: url('PT_Sans.eot'); src: local('PT Sans Regular'), local('PTSans-Regular'), url('PT_Sans.woff') format('woff'), url('PT_Sans.ttf') format('truetype'), url('PT_Sans.svg#PTSans-Regular') format('svg'); } p { font-family: "PTSansRegular", Helvetica, Arial, sans-serif; } Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  • So how do you do it? @font-face { font-family: 'PTSansRegular'; src: url('PT_Sans.eot'); src: local('PT Sans Regular'), local('PTSans-Regular'), url('PT_Sans.woff') format('woff'), url('PT_Sans.ttf') format('truetype'), url('PT_Sans.svg#PTSans-Regular') format('svg'); } p { font-family: "PTSansRegular", Helvetica, Arial, sans-serif; } Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  • So how do you do it? @font-face { font-family: 'PTSansRegular'; src: url('PT_Sans.eot'); src: local('PT Sans Regular'), local('PTSans-Regular'), url('PT_Sans.woff') format('woff'), url('PT_Sans.ttf') format('truetype'), url('PT_Sans.svg#PTSans-Regular') format('svg'); } p { font-family: "PTSansRegular", Helvetica, Arial, sans-serif; } Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  • So how do you do it? @font-face { font-family: 'PTSansRegular'; src: url('PT_Sans.eot'); src: local('PT Sans Regular'), local('PTSans-Regular'), url('PT_Sans.woff') format('woff'), url('PT_Sans.ttf') format('truetype'), url('PT_Sans.svg#PTSans-Regular') format('svg'); } p { font-family: "PTSansRegular", Helvetica, Arial, sans-serif; } Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  • Licensing • Make sure you own a license for font • Read the EULA from each foundry. • Take precautions to secure the font from download • Typekit fills a void
  • Browser Differences Firefox Mac IE/FF XP with Cleartype Firefox XP w/o Cleartype IE6 w/o Cleartype
  • IE Jaggy Fix p { filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  • IE Jaggy Fix p { filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  • FOUT • Flash of unstyled text • Webkit hides font
  • Fighting the FOUT • place css at top so it loads first • use Paul Irish embed method • use server side compression to serve files (zip/gzip) • base64 encode ttf/otf fonts • subset fonts to reduce file size
  • Without base64 encoding
  • Without base64 encoding
  • Without base64 encoding
  • Without base64 encoding
  • With base64 encoding
  • With base64 encoding
  • With base64 encoding
  • Fighting the FOUT • place css at top so it loads first • use Paul Irish embed method • use server side compression to serve files • base64 encode ttf/otf fonts • subset fonts to reduce file size
  • Subset Fonts fontsquirrel @font-face generator http://www.fontsquirrel.com/fontface/generator
  • Use correct font for styles h1, strong { font-weight: normal; font-family: "PTSansBold", Helvetica, Arial, sans-serif; } em { font-style: normal; font-family: "PTSansItalic", Helvetica, Arial, sans-serif; } • Webkit interprets correctly, other browsers not so much
  • My @font-face site: petridisc.com Resources & Tools fontsquirrel.com webfonts.info paulirish.com typekit.com webfontspecimen.com Get crackin’.