Web FoundationsTUESDAY, OCTOBER 29, 2013

LECTURE 20: EMBEDDING WEB FONTS

Web "Safe" FontsSerif Font Families

Web "Safe" FontsSerif Font Families

Web "Safe" FontsMonospace Font Families

Web/Browser Specific "Embedded" Fonts

ttf [wikipedia] otf [wikipedia]True Type Font and Open Type Font are normal old fonts developed by Apple and Microsoft used

in the 1980s and used in most computer operating systems and applications, but some people got annoyed that this meant anyone could download and use them.

Support for ttf and otf can be checked at http://caniuse.com/ttf

eot [wikipedia]Embedded Open Type fonts were designed by Microsoft for use as embedded fonts by web pages. These font files can be created from existing TrueType font files using Microsoft's Web Embedding Fonts Tool (WEFT), and other proprietary and open source software (lile ttf2eot).

eot is needed for Internet Explorers that are older than IE9 but eot is an "unfriendly" format that strips out much of the original font features.

Support for eot can be checked at http://caniuse.com/eot

Web/Browser Specific "Embedded" Fonts

woff [wikipedia]Web Open Font Format was developed during 2009 and is a World Wide Web Consortium

(W3C) Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints. It also has a mode that prevents people from pirating the font.

Support for woff can be checked at http://caniuse.com/woff

svg [wikipedia]Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics

that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999. iOS on the iPhone and iPad implemented svg fonts.

Support for svg can be checked at http://caniuse.com/svg

Web Fonts

DEMO Google Fonts

http://faculty.cascadia.edu/cduckett/foundations/fonts/font1.html

Web Fonts

DEMO 1001 Free FontsDEMO Font Squirrel Web Font GeneratorDEMO Font 2 Web

http://faculty.cascadia.edu/cduckett/foundations/fonts/font2.html

Font to Web Font Converters • Microsoft WEFT (ttf to eot)• TTF2EOT (ttf to eot)• Batik (ttf to svg)• Font2Web (ttf/oft to ttf, otf,.eot, woff, svg)

@font-face

The "standard" way of implementing @font-face

• W3Schools: @font-face Rule• What is @font-face ?• The Essential Guide to @font-face• Using @font-face• The @font-face Rule Revisted and Useful Web Font Tricks

@font-face { font-family: 'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix')format('embedded-opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal;}

Web Font and @font-face Links

• 1001 Free Fonts (ttf fonts)• Google Fonts• A Beginner's Guide to Using Google Web Fonts• Font 2 Web• Quick guide to Web Fonts via @font-face• Installing Web Fonts Start to Finish• How to Use @font-face Fonts• Font Squirrel Web Font Generator• Adobe Edge Web Fonts• Adobe Typekit• Font Deck• Open Font Library