Notice: Undefined index: testing in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/4_Physical_Design/Coding_CSS3/4_Embedded_Fonts/text_embedding_fonts.html on line 127

Notice: Undefined variable: docRoot_secure in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/4_Physical_Design/Coding_CSS3/4_Embedded_Fonts/text_embedding_fonts.html on line 143

Training

"Winners make choices,
losers make excuses.
"
Decide to be a Winner!!!!

±Arrows Getting Started

± Phase 1
Planning

± Website Tools

± Phase 3
Conceptual Design

± Helpful Information

± Phase 4
Physical Design

± Phase 5
Testing

± Phase 6
Implement and Market Website

± Other Web Development Items

± Multimedia

± Useful Utilities

± Programming

± Advanced Programming

± Microsoft Office Products

± Computer Maintenance

± Other


Web Design

NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.


Notice: Undefined variable: message in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/dir_listing_enhanced.php on line 67

Notice: Undefined variable: message in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/dir_listing_enhanced.php on line 72

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Notice: Undefined variable: print_file_data in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/dir_listing_enhanced.php on line 127

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Warning: Use of undefined constant r - assumed 'r' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/code/F_get_page_title_Enh.php on line 28

Notice: Undefined variable: print_folder_data in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/dir_listing_enhanced.php on line 160

Notice: Undefined variable: message in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/Templates/code/WebDesign_toc.php on line 12

Notice: Undefined variable: message in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/4_Physical_Design/Coding_CSS3/4_Embedded_Fonts/text_embedding_fonts.html on line 251

CSS3 Embedding Fonts

CSS3 allows font embedding where fonts are referenced from the web server. This technology allows fonts to be used on web pages that are not installed on the users computer.

When the copy and layout were set, Microsoft WEFT was used to create "font-objects" that were linked to the page. The WEFT tool analyzes the font usage of Web pages, gathers the required characters from each font used, and creates the compressed font objects. It also modifies the HTML page by writing in the CSS code that links the font objects to that page. If you use View Source on the demonstration page, you'll see the format of the code that was added.

The preceding code instructs Internet Explorer 4.0 to use the GOUDYST0.eot font object whenever there is text on the page specified in the Goudy Stout font. The following table shows the fonts used by the page, the number of unique characters used, and the size of the font object that contains them.

Embedded OpenType (EOT) fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages. These files usually use the extension ".eot".

 

Browser Support of @font-face

  • Internet Explorer 9+ only supports EOT
  • Mozilla Firefox support OTF and TTF
  • Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG
  • Mobile devices support SVG

Links

Examle

Specify a font named "TestFont", and specify the URL where it can be found:

 @font-face {
		font-family: TestFont;
     src: 	local('TestFont'), /* trick - tells browser to use font name not on their computer */
				url('TestFont.eot')		format('eot'),
     		url('TestFont.woff')	format('woff'),
     		url('TestFont.ttf') 	format('truetype'),
				url(''TestFont.svg') 	format('svg');
		font-weight: normal; 
		font-style: normal; 
	}

font-family:TestFont, Georgia, Palatino, Times New Roman, serif; 
   

Links

top of page


Warning: Use of undefined constant PHP_SELF - assumed 'PHP_SELF' (this will throw an Error in a future version of PHP) in /hermes/walnacweb03/walnacweb03af/b1896/as.asaferco/webdesign/4_Physical_Design/Coding_CSS3/4_Embedded_Fonts/text_embedding_fonts.html on line 314

Page last updated: May 31, 2012 14:26 PM

It is all about:
Content and Navigation...

Web Site by: A Safer Company LLC