Font Embedding With CSS3
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Font Embedding With CSS3

on

  • 7,046 views

 

Statistics

Views

Total Views
7,046
Views on SlideShare
7,014
Embed Views
32

Actions

Likes
3
Downloads
29
Comments
1

4 Embeds 32

http://www.slideshare.net 21
http://han4u.blogspot.com 9
http://www.linkedin.com 1
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Font Embedding With CSS3 Presentation Transcript

  • 1. Font Embedding with CSS3
  • 2. Options • Font Stacks • Background Image Replacement • Flash and Javascript (sIFR) • Cufon, FLIR
  • 3. Font Embedding • Use @font-face to declare font • point to font file on server • declare format if needed • Call font with font-family
  • 4. Browser Support • Firefox 3.5 • Safari 3 and 4 • Opera 10 • Internet Explorer 4+ • No Chrome Support - yet
  • 5. Font Formats • Open Type (OTF) • True Type (TTF) • Embedded Open Type (EOT)
  • 6. Embed The Font @font-face { font-family: Chunkfive; src:url("/fonts/Chunkfive.otf") format('opentype'); }
  • 7. Embed The Font @font-face { font-family: Chunkfive; src: url("/fonts/Chunkfive.eot"); src: local(Chunkfive), url("/fonts/Chunkfive.otf") format('opentype'); }
  • 8. Call The Font .headline {font-family: Chunkfive;} .headline {font: 2.4em Chunkfive;} .headline {font: 2.4em Chunkfive, Helvetica, Arial, sans-serif;}
  • 9. EOT Format • Used by IE since version 4 • Only browser to support it • Most fonts do not have EOT format • Convert using WEFT or ttf2eot • Ask for EOT Format
  • 10. What Now?
  • 11. Some fonts are already licensed for embedding.
  • 12. Not All Fonts Are Licensed For Embedding
  • 13. Licensing Services • TypeKit.com (beta) • Free up to $50/mo • Up to 280 fonts to choose from • Javascript + CSS
  • 14. <script type="text/javascript" src="http:// use.typekit.com/cti5uqi.js"></script> <script type="text/javascript">try{Typekit.load();} catch(e){}</script>
  • 15. Resources • CSS3.info • webfonts.info • typekit.com • Typotheque.com • http://delicious.com/tag/webdesignlunch
  • 16. Fin www.jeremyflint.com @jeremyflint jflint@gmail.com