HOW TO IMPLEMENT WEB FONTS ON YOUR WEBSITE
May 19, 2015
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