Font Embedding
  with CSS3
Options

• Font Stacks
• Background Image Replacement
• Flash and Javascript (sIFR)
• Cufon, FLIR
Font Embedding

• Use @font-face to declare font
• point to font file on server
• declare format if needed
• Call font with...
Browser Support

• Firefox 3.5
• Safari 3 and 4
• Opera 10
• Internet Explorer 4+
• No Chrome Support - yet
Font Formats


• Open Type (OTF)
• True Type (TTF)
• Embedded Open Type (EOT)
Embed The Font

@font-face {
 font-family: Chunkfive;
 src:url("/fonts/Chunkfive.otf") format('opentype');
 }
Embed The Font

@font-face {
  font-family: Chunkfive;
  src: url("/fonts/Chunkfive.eot");
  src: local(Chunkfive), url("/fon...
Call The Font

.headline {font-family: Chunkfive;}
.headline {font: 2.4em Chunkfive;}
.headline {font: 2.4em Chunkfive, Helve...
EOT Format

• Used by IE since version 4
• Only browser to support it
• Most fonts do not have EOT format
• Convert using ...
What Now?
Some fonts are
already licensed for
    embedding.
Not All Fonts Are
  Licensed For
  Embedding
Licensing Services

• TypeKit.com (beta)
• Free up to $50/mo
• Up to 280 fonts to choose from
• Javascript + CSS
<script type="text/javascript" src="http://
use.typekit.com/cti5uqi.js"></script>
<script type="text/javascript">try{Typek...
Resources

• CSS3.info
• webfonts.info
• typekit.com
• Typotheque.com
• http://delicious.com/tag/webdesignlunch
Fin

www.jeremyflint.com
   @jeremyflint
 jflint@gmail.com
Font Embedding With CSS3
Upcoming SlideShare
Loading in...5
×

Font Embedding With CSS3

5,059

Published on

Published in: Technology, Education
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,059
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
31
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Font Embedding With CSS3

  1. 1. Font Embedding with CSS3
  2. 2. Options • Font Stacks • Background Image Replacement • Flash and Javascript (sIFR) • Cufon, FLIR
  3. 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. 4. Browser Support • Firefox 3.5 • Safari 3 and 4 • Opera 10 • Internet Explorer 4+ • No Chrome Support - yet
  5. 5. Font Formats • Open Type (OTF) • True Type (TTF) • Embedded Open Type (EOT)
  6. 6. Embed The Font @font-face { font-family: Chunkfive; src:url("/fonts/Chunkfive.otf") format('opentype'); }
  7. 7. Embed The Font @font-face { font-family: Chunkfive; src: url("/fonts/Chunkfive.eot"); src: local(Chunkfive), url("/fonts/Chunkfive.otf") format('opentype'); }
  8. 8. Call The Font .headline {font-family: Chunkfive;} .headline {font: 2.4em Chunkfive;} .headline {font: 2.4em Chunkfive, Helvetica, Arial, sans-serif;}
  9. 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. 10. What Now?
  11. 11. Some fonts are already licensed for embedding.
  12. 12. Not All Fonts Are Licensed For Embedding
  13. 13. Licensing Services • TypeKit.com (beta) • Free up to $50/mo • Up to 280 fonts to choose from • Javascript + CSS
  14. 14. <script type="text/javascript" src="http:// use.typekit.com/cti5uqi.js"></script> <script type="text/javascript">try{Typekit.load();} catch(e){}</script>
  15. 15. Resources • CSS3.info • webfonts.info • typekit.com • Typotheque.com • http://delicious.com/tag/webdesignlunch
  16. 16. Fin www.jeremyflint.com @jeremyflint jflint@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×