HOW TO IMPLEMENTWEB FONTSON YOUR WEBSITE
WHO AM I?            •  Jim Kidwell            •  With Extensis for over 8 years            •  Author, Speaker & Font Fana...
AGENDA•    Why web fonts?•    Web design process overview•    Photoshop mock-up sample•    Updating an existing site•    S...
WHY WEB FONTS?•    Web design is 95% typography•    Browsers are nally ready for it•    Very few default system fonts•    ...
WEB DESIGN PROCESSDesigning from scratch
WHERE DO WEB FONTS FIT IN?•    Typically, they don’t.•    Fonts are software•    Desktop Fonts ≠ Web Fonts•    Photoshop r...
PHOTOSHOP WEB FONT PLUG-IN•  Direct access to web fonts•  Used to create comps and   mock-ups•  www.webfontplugin.com
CHANGING FONTS ONAN EXISTING PAGE•  Firebug, Chrome Developer Tools, Etc.•  FontDropper 1000•  www.webink.com/fontdropper
FONT SELECTION HELP•    It’s exciting!•    Utilize some restraint•    4-5 typefaces•    Pair fonts wisely•    FontFuse    ...
GETTING WEB FONTS•    Self hosting•    Web font services•    How WebINK does it•    City of Type site sample
CSS TIPS•    Beware of faux styling•    Use font family naming abstraction•    Examine CSS Frameworks and Toolkits careful...
RESOURCES + Q&A•    WebINK                                   •    Web Typography Resources     www.webink.com             ...
Upcoming SlideShare
Loading in...5
×

Implementing Web Fonts on your Website

1,698

Published on

Have you always wanted to get away from boring, default fonts on your websites? Web fonts can allow you to use your favorite typefaces on the web, without saving them out as an image, or using other hacks.

Join typography expert Jim Kidwell for this informative session where you will learn how to:
- Craft solid CSS to integrate web fonts in your site
- Use the Web Font Plug-in to mock-up your sites using WebINK and Google Web Fonts
- Find suitable font pairings for your site
- Test web fonts on existing sites without writing any code

Published in: 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,698
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Implementing Web Fonts on your Website

  1. 1. HOW TO IMPLEMENTWEB FONTSON YOUR WEBSITE
  2. 2. WHO AM I? •  Jim Kidwell •  With Extensis for over 8 years •  Author, Speaker & Font Fanatic
  3. 3. AGENDA•  Why web fonts?•  Web design process overview•  Photoshop mock-up sample•  Updating an existing site•  Selecting font pairs•  CSS examples•  Q&A
  4. 4. WHY WEB FONTS?•  Web design is 95% typography•  Browsers are nally ready for it•  Very few default system fonts•  Thousands of web fonts now available•  Easy to update•  Accessibility (ADA compliant)•  Search engine friendly (SEO)
  5. 5. WEB DESIGN PROCESSDesigning from scratch
  6. 6. WHERE DO WEB FONTS FIT IN?•  Typically, they don’t.•  Fonts are software•  Desktop Fonts ≠ Web Fonts•  Photoshop requires desktop fonts
  7. 7. PHOTOSHOP WEB FONT PLUG-IN•  Direct access to web fonts•  Used to create comps and mock-ups•  www.webfontplugin.com
  8. 8. CHANGING FONTS ONAN EXISTING PAGE•  Firebug, Chrome Developer Tools, Etc.•  FontDropper 1000•  www.webink.com/fontdropper
  9. 9. FONT SELECTION HELP•  It’s exciting!•  Utilize some restraint•  4-5 typefaces•  Pair fonts wisely•  FontFuse fontfuse.webink.com
  10. 10. GETTING WEB FONTS•  Self hosting•  Web font services•  How WebINK does it•  City of Type site sample
  11. 11. CSS TIPS•  Beware of faux styling•  Use font family naming abstraction•  Examine CSS Frameworks and Toolkits carefully•  FOUT-B-Gone www.extensis.com/en/WebINK/fout-b-gone
  12. 12. RESOURCES + Q&A•  WebINK •  Web Typography Resources www.webink.com www.webink.com/type-resources•  FontDropper 1000 •  WebINK blog www.webink.com/fontdropper blog.webink.com•  Web Font Plug-in •  Follow us on Twitter! www.webfontplugin.com @extensis•  FontFuse @webink fontfuse.webink.com @jimkidwell•  FOUT-B-Gone www.extensis.com/en/WebINK/ fout-b-gone
  1. A particular slide catching your eye?

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

×