Font Embedding With CSS3

  • 4,822 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
4,822
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
30
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