Your SlideShare is downloading. ×
Running with Font Squirrels - Aaron Hall
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Running with Font Squirrels - Aaron Hall

1,489
views

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 …

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,489
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
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. I'm Aaron Hall A web designer & front-end developer Hello! 10/27/10
  • 2. Today, we’re going to talk about @font-face
  • 3. Examples are....
  • 4. Short story about @font-face
  • 5. Not new to CSS3
  • 6. Was first proposed for CSS2
  • 7. Been implemented in since IE4!
  • 8. IE loves & demands .eot format
  • 9. No other browsers at that time decided to use this .eot format (smart move!)
  • 10. like this...
  • 11. Font  Directory
  • 12. Limited font choices
  • 13. No custom fonts
  • 14. The fonts are dependent on Google’s host but...
  • 15. 100% “free for commercial use”
  • 16. Many nice font kits already setup
  • 17. Time saving & very useful
  • 18. and...
  • 19. the awesome @font-face generator
  • 20. for your custom fonts that
  • 21. Fontsquirrel doesn’t have
  • 22. able to create not only .ttf but .woff, .svg, & .eot formats
  • 23. and to take complete control of the settings
  • 24. which are... Font formats Font options Subsetting CSS formats CSS options
  • 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. 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. 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. 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. CSS options what are they? what does it do? Style Linking Group styles under family Base64 Encode Encode Font Within CSS
  • 30. Check the EULA (End User License Agreement) Important!
  • 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. <h1>@font-face is awesome!</h1>
  • 33. <h1>@font-face is awesome!</h1>
  • 34. @font-face is awesome! <h1>@font-face is awesome!</h1>
  • 35. One more thing...
  • 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. Find this free service valuable and want to see it grow? Consider donating to them.
  • 38. Questions? See me after the meeting or me@aaron.im Thank you!