Your SlideShare is downloading. ×
Font Embedding With CSS3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Font Embedding With CSS3

4,963
views

Published on

Published in: Technology, Education

1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,963
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
31
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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