Fonting

Transcript

1. @Font-Face
2. @Font-Face The @font-face CSS method is the strongest, simplest and most flexible method vs. Cufon, sIFR, FLIR for delivering web typography. http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/ !Many developers have experienced such poor results from Windows and Internet Explorer that they avoid using custom fonts altogether. Fontstacks: http://css-tricks.com/snippets/css/font-stacks/ http://cssfontstack.com/ http://awesome-fontstacks.com/
3. Standard Formats for Digital Type Fonts TTF: TrueType was developed by Apple Computer, and subsequently licensed to Microsoft Corporation. Each company has made independent extensions to TrueType, which is used in both Windows and Macintosh operating systems. OTF: OpenType is developed jointly by Adobe and Microsoft and supersedes Microsoft's TrueType Open extensions to the TrueType format. An OpenType font is a single file, which can be used on both Macintosh and Windows platforms without conversion. EOT: The Embedded OpenType File Format was developed by Microsoft to enable TrueType and OpenType fonts to be linked to web pages in a compact form. SVG: Scalable Vector Graphics. WOFF: Web Open Font Format, submitted by the Mozilla Foundation, Opera Software and Microsoft. Essentially a wrapper that contains TrueType, OpenType, or Open Font Format fonts that have been compressed using a WOFF encoding tool.
4. Fontspring’s Bulletproof @Font-Face Syntax with IE9 Support @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } Browser compatibility Safari, IE 6-9, IE 9 Compatibility Modes, Firefox, Chrome, iOS, Android, Opera
5. Data URI Fonts @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('embedded-opentype'); } @font-face { font-family: 'MyFontFamily'; url(data:font/truetype;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE) format('truetype'), url(data:font/woff;charset=utf-8;base64,BASE64_ENCODED_DATA_HERE) format('woff'), url('myfont-webfont.svg#svgFontName') format('svg'); } http://www.motobit.com/util/base64-decoder-encoder.asp
6. Popular @font-face Services
7. Fontsquirrel’s @Font-Face Generator http://www.fontsquirrel.com/fontface/generator
8. Suggested Method http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/ • Grab your favourite font (free or paid) from an online font service • Use Fontsquirrel’s @Font-Face generator to create your Font-Kit. To generate Data-URI use the “expert” mode and enable the “Base64 encode” option. • Upload the Font Formats to the server and update your CSS • Done!