1. Web Foundations TUESDAY, OCTOBER 29, 2013 LECTURE 20: EMBEDDING WEB FONTS

2. Web "Safe" Fonts Serif Font Families

3. Web "Safe" Fonts Serif Font Families

4. Web "Safe" Fonts Monospace Font Families

5. Web/Browser Specific "Embedded" Fonts ttf [ wikipedia ] otf [wikipedia] 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/ttfhttp://caniuse.com/ttf eot [wikipedia]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).WEFTttf2eot 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/eothttp://caniuse.com/eot

6. Web/Browser Specific "Embedded" Fonts woff [wikipedia]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/woffhttp://caniuse.com/woff svg [ wikipedia ] 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/svghttp://caniuse.com/svg

7. Web Fonts DEMO Google FontsGoogle Fonts http://faculty.cascadia.edu/cduckett/foundations/fonts/font1.html

8. Web Fonts DEMO 1001 Free Fonts1001 Free Fonts DEMO Font Squirrel Web Font GeneratorFont Squirrel Web Font Generator DEMO Font 2 WebFont 2 Web http://faculty.cascadia.edu/cduckett/foundations/fonts/font2.html Font to Web Font Converters Microsoft WEFT (ttf to eot) Microsoft WEFT TTF2EOT (ttf to eot) TTF2EOT Batik (ttf to svg) Batik Font2Web (ttf/oft to ttf, otf,.eot, woff, svg) Font2Web

9. @font-face The "standard" way of implementing @font-face W3Schools: @font-face Rule@font-face Rule What is @font-face ? What is @font-face ? The Essential Guide to @font-face The Essential Guide to @font-face Using @font-face Using @font-face The @font-face Rule Revisted and Useful Web Font Tricks 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; }

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