1 / 10

Web Foundations

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 ]

hawa
Download Presentation

Web Foundations

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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] • 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 ttfand otfcan 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 (lilettf2eot). • eotis 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 eotcan be checked at http://caniuse.com/eot

  6. 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 woffcan 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 svgfonts. Support for svgcan be checked at http://caniuse.com/svg

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

  8. Web Fonts DEMO 1001 Free Fonts DEMO Font Squirrel Web Font Generator DEMO Font 2 Web • 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) http://faculty.cascadia.edu/cduckett/foundations/fonts/font2.html

  9. @font-face The "standard" way of implementing @font-face @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; } • 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

  10. 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

More Related