HOW TO IMPLEMENT

WEB FONTS

ON YOUR WEBSITE

WHO AM I?

•  Jim Kidwell •  With Extensis for over 8 years •  Author, Speaker & Font Fanatic

AGENDA

•  Why web fonts? •  Web design process overview •  Photoshop mock-up sample •  Updating an existing site •  Selecting font pairs •  CSS examples •  Q & A

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)

Designing from scratch

WEB DESIGN PROCESS

WHERE DO WEB FONTS FIT IN?

•  Typically, they don’t. •  Fonts are software •  Desktop Fonts ≠ Web Fonts •  Photoshop requires desktop fonts

PHOTOSHOP WEB FONT PLUG-IN

•  Direct access to web fonts •  Used to create comps and

mock-ups •  www.webfontplugin.com

CHANGING FONTS ON AN 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

fontfuse.webink.com

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 carefully •  FOUT-B-Gone

www.extensis.com/en/WebINK/fout-b-gone

RESOURCES + Q&A

•  WebINK www.webink.com

•  FontDropper 1000 www.webink.com/fontdropper

•  Web Font Plug-in www.webfontplugin.com

•  FontFuse fontfuse.webink.com

•  FOUT-B-Gone www.extensis.com/en/WebINK/fout-b-gone

•  Web Typography Resources www.webink.com/type-resources

•  WebINK blog blog.webink.com

•  Follow us on Twitter! @extensis @webink @jimkidwell