.jpg)
.jpg)
.jpg)
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.
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
Page last updated: May 31, 2012 10:26 AM
Content and Navigation...