I'm Aaron Hall
A web designer & front-end developer
Hello!
10/27/10
Today, we’re going to talk about
@font-face
Examples are....
Short story about
@font-face
Not new to CSS3
Was first proposed
for CSS2
Been implemented in
since IE4!
IE loves & demands
.eot format
No other browsers at
that time decided to
use this .eot format
(smart move!)
like this...
Font	
  Directory
Limited font choices
No custom fonts
The fonts are dependent
on Google’s host but...
100%
“free for commercial use”
Many nice font kits
already setup
Time saving
& very useful
and...
the awesome
@font-face generator
for your custom fonts that
Fontsquirrel doesn’t have
able to create not
only .ttf but .woff, .svg,
& .eot formats
and to take complete
control of the settings
which are...
Font formats
Font options
Subsetting
CSS formats
CSS options
Font format
type of file extension what it is called what it supported
.ttf TrueType Font
All browsers except
IEs and iProd...
Font options
what are they? what does it do?
Add Hinting Improve Windows rendering
Remove Kerning Removing kerning can red...
Subsetting
what are they? what does it do?
Basic Subsetting Cover basic such as Lowercase, Uppercase, etc.
Custom Subsetti...
CSS formats
what are they? what does it do?
Bulletproof (Smiley) Avoids local() problems
Bulletproof (Original) Safe and c...
CSS options
what are they? what does it do?
Style Linking Group styles under family
Base64 Encode Encode Font Within CSS
Check the EULA
(End User License Agreement)
Important!
@font-face {
font-family: 'CustomFont';
src: url('CustomFont.eot');
src: local('☺'),
url('CustomFont.woff') format('woff')...
<h1>@font-face is awesome!</h1>
<h1>@font-face is awesome!</h1>
@font-face is
awesome!
<h1>@font-face is awesome!</h1>
One more thing...
sifr, cufón, etc. are great for font
replacement but the best technique to
use @font-face is that they do not rely
on java...
Find this free service valuable and
want to see it grow?
Consider donating to them.
Questions?
See me after the meeting or
me@aaron.im
Thank you!
Running with Font Squirrels - Aaron Hall
Running with Font Squirrels - Aaron Hall
Running with Font Squirrels - Aaron Hall
Running with Font Squirrels - Aaron Hall
Running with Font Squirrels - Aaron Hall
Upcoming SlideShare
Loading in...5
×

Running with Font Squirrels - Aaron Hall

1,605

Published on

It’s time to kick your Cufon and sIFR habits in the nuts. Aaron is a web designer and front-end developer who loves experimenting with HTML and CSS. For those who aren’t already onboard with @font-face, he’ll explain how to get up-and-running with them quickly using the free resource, Font Squirrel.

From the October 2010 Refresh Columbia Meetup: refreshcolumbia.org/​meetings/​october-2010-meetup/​

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,605
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Running with Font Squirrels - Aaron Hall

  1. 1. I'm Aaron Hall A web designer & front-end developer Hello! 10/27/10
  2. 2. Today, we’re going to talk about @font-face
  3. 3. Examples are....
  4. 4. Short story about @font-face
  5. 5. Not new to CSS3
  6. 6. Was first proposed for CSS2
  7. 7. Been implemented in since IE4!
  8. 8. IE loves & demands .eot format
  9. 9. No other browsers at that time decided to use this .eot format (smart move!)
  10. 10. like this...
  11. 11. Font  Directory
  12. 12. Limited font choices
  13. 13. No custom fonts
  14. 14. The fonts are dependent on Google’s host but...
  15. 15. 100% “free for commercial use”
  16. 16. Many nice font kits already setup
  17. 17. Time saving & very useful
  18. 18. and...
  19. 19. the awesome @font-face generator
  20. 20. for your custom fonts that
  21. 21. Fontsquirrel doesn’t have
  22. 22. able to create not only .ttf but .woff, .svg, & .eot formats
  23. 23. and to take complete control of the settings
  24. 24. which are... Font formats Font options Subsetting CSS formats CSS options
  25. 25. Font format type of file extension what it is called what it supported .ttf TrueType Font All browsers except IEs and iProducts .woff Web Open Font Format FF3.6+, IE9+, Chrome 5+ .eot Embedded Font Format IE4+ .svg Scaleable Vector Graphics iProducts
  26. 26. Font options what are they? what does it do? Add Hinting Improve Windows rendering Remove Kerning Removing kerning can reduce filesize. WebOnly™ Disable desktop use Keep OT Features Ligatures, alt glyphs etc. Simplifty Outlines Remove extra points (lossy) Build Cufón File Javascript font alternative
  27. 27. Subsetting what are they? what does it do? Basic Subsetting Cover basic such as Lowercase, Uppercase, etc. Custom Subsetting More choices: Lowercase, Uppercase, Numbers, over 33+ different languages and much more. No Subsetting Leave as it is. Big file size. Subsetting will remove glyphs from your font for the purpose of reducing file size.
  28. 28. CSS formats what are they? what does it do? Bulletproof (Smiley) Avoids local() problems Bulletproof (Original) Safe and compact Mo' Bulletproofer Uses double declarations
  29. 29. CSS options what are they? what does it do? Style Linking Group styles under family Base64 Encode Encode Font Within CSS
  30. 30. Check the EULA (End User License Agreement) Important!
  31. 31. @font-face { font-family: 'CustomFont'; src: url('CustomFont.eot'); src: local('☺'), url('CustomFont.woff') format('woff'), url('CustomFont.ttf') format('truetype'), url('CustomFont#VrleBEAV') format('svg'); } h1 { font: normal 25px/35px 'CustomFont', sans-serif; } Generated by FontSquirrel
  32. 32. <h1>@font-face is awesome!</h1>
  33. 33. <h1>@font-face is awesome!</h1>
  34. 34. @font-face is awesome! <h1>@font-face is awesome!</h1>
  35. 35. One more thing...
  36. 36. sifr, cufón, etc. are great for font replacement but the best technique to use @font-face is that they do not rely on javascript, image replacement or flash
  37. 37. Find this free service valuable and want to see it grow? Consider donating to them.
  38. 38. Questions? See me after the meeting or me@aaron.im Thank you!

×