Transcript 6b - Programajama!

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]
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 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
@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
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