Web Foundations TUESDAY, OCTOBER 29, 2013 LECTURE 20: EMBEDDING WEB FONTS
Web "Safe" Fonts Serif Font Families
Web "Safe" Fonts Serif Font Families
Web "Safe" Fonts Monospace Font Families
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 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
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 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 iOS on the iPhone and iPad implemented svg fonts. Support for svg can be checked at
Web Fonts DEMO Google FontsGoogle Fonts
Web Fonts DEMO 1001 Free Fonts1001 Free Fonts DEMO Font Squirrel Web Font GeneratorFont Squirrel Web Font Generator DEMO Font 2 WebFont 2 Web 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
@font-face The "standard" way of Rule What ? What ? The Essential Guide The Essential Guide Rule Revisted and Useful Web Font Tricks Rule Revisted and Useful Web Font { 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 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 Quick guide to Web Fonts Installing Web Fonts Start to Finish Installing Web Fonts Start to Finish How to Fonts How to 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