{@font-face} At Font-Face Rule | CSS: Presentation Layer
Standards Based Development
@font-face{font-family:"WebSymbolsRegular";
src:url("/fonts/websymbols-regular-webfont.eot");
src:url("/fonts/websymbols-regular-webfont.eot?#iefix") format('embedded-opentype"),
url("/fonts/websymbols-regular-webfont.woff") format('woff"),
url("/fonts/websymbols-regular-webfont.ttf") format('truetype"),
url("/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular") format('svg")}
Font Formats
| Format | Description |
|---|---|
| ttf | Raw TrueType file, designed to look good on-screen. |
| eot Lite | eot is only supported by Internet Explorer. eot Lite is uncompressed and is the same filesize as a ttf. |
| eot Compressed | eot Compressed with lv compression. |
| woff | Cross-browser, web-only font format that uses gzip compression (eot Compressed is typically smaller than woff). ie9+, ff3.6+, Chrome 5+ |
| svg | xml required by iOS devices before version 4.2. |
| svgz | Gzipped version of svg. |
Browser Support
| Browser | TrueType | WOFF | EOT | SVG | SVGZ |
|---|---|---|---|---|---|
* Only TTF fonts that have the allow-embedding bit turned on. | |||||
| IE 5-8 | Yes | ||||
| IE 9 | Yes* | Yes | Yes | ||
| Firefox 3.5 | Yes | ||||
| Firefox 3.6 | Yes | Yes | |||
| Safari 3.1+ | Yes | Yes | Yes | ||
| Chrome 6 | Yes | Yes | Yes | Yes | |
| Opera 10 | Yes | Coming Soon | Yes | Yes | |
| iOS 1-4.1 | Yes | ||||
| iOS 4.2+ | Yes | Yes | Yes | ||
EOT
EOT are exclusively supported by ie; EOTFast allows for modifications of TTF fonts to natively denset EOT fonts.
svg
svg are applied via @font-face in order to get support for @font-face in Chrome, Safari for iPhone (Mobile Safari), and Opera.
Note: all browsers that support svg support svg fonts within svg files.
ie Block Rendering
@font-face only blocks rendering in ie when there is a script element above the @font-face declaration.
Cross Domain Font embedding for Firefox
The following .htaccess rule permits cross-domain font embedding in Firefox:
Expand | Embed | Plain Text
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://yourdomain.com"
</IfModule>
</FilesMatch>
Cross Domain Font Embedding in Firefox
@font-face rule (At Font-Face Rule) enables the use of downloadable web fonts (among other things).
Base64 EOT in ie6/ie7
How to achieve @font-face Base64 encoding EOT font files (inlining in CSS) IE6/IE7
font-face Cross-Browser Declaration Breakdown
/** why each line is declared **/
@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 */
}
Chrome and .svg
It appears that Chrome utilises the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using CSS:
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .SVG file.
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}
}
@font-face gzipping – take II">@font-face gzipping – take II">@font-face gzipping – take II
GO
Gzip your @font-face files
GO
Font Squirrel FontFace Generator Explained
Rendering and Miscellaneous Options
Add Hinting: This option offers improved font display in Windows. You should only uncheck it if you are absolutely positive that the respective fonts are screen-optimized already.
WebOnly™ adds specific modifications which allow browsers to use the modified fonts but avoid installation of these fonts on common operating systems. Checking this option helps to avoid unintended illegal copies.
Keep OT Features: Desktop fonts may have a number of OpenType functions. As there is little browser support for these functions today, you might want to remove them with this option (rendering and miscellaneous options). In order to keep some of the standard, i.e. already supported OpenType functions such as ligatures, you can activate this option.
Remove Kerning: Another possibility to reduce the file size is by checking this option which will erase all kerning values that are contained for specific letter combinations. In case you are going to use the font for body text, this option is highly recommended. For headlines it should be handled with care or not be done at all as the missing kerning values might lead to the unpleasant effect of the shape of words looking like a Swiss cheese.
Simplify Outlines does exactly that: it tries to simplify the outline of characters. As this option reduces the quality of screen display, it is not advisable to use it.
Build Cufón File isn’t directly part of the options for @font-face embedding. For further details on building a file you can also check the Cufón website.
Subsetting
Subsetting means that all superfluous characters are removed. Whether or not this is actually necessary depends on the respective font. Some fonts can easily contain thousands of characters of various writing systems which bloats the font file considerably. Without subsetting such fonts, they are not suitable for use as Web fonts.
The option Basic Subsetting is set as default and offers the usual Western European glyph allocation based on the character set MacRoman. Custom Subsetting allows for a custom defined scope of contained characters and glyphs. Whereas, the option No Subsetting deactivates subsetting completely and converts the font with all contained characters and glyphs.
Chrome Fix
To fix font-face in Chrome, declare the svg resource before the .ttf or .woff resources when you declare your font sources. So instead of:
@font-face{ font-family:'Overlock'; src:url("/fonts/Overlock-OTF-webfont.eot"); src:url("/fonts/Overlock-OTF-webfont.eot?#iefix") format('embedded-opentype'), url("/fonts/Overlock-OTF-webfont.woff") format('woff'), url("/fonts/Overlock-OTF-webfont.ttf") format('truetype'), url("/fonts/Overlock-OTF-webfont.svg#Overlock") format('svg'); font-weight:normal; font-style:normal }/pre>do this:
@font-face{ font-family:'Overlock'; src:url("/fonts/Overlock-OTF-webfont.eot"); src:url("/fonts/Overlock-OTF-webfont.eot?#iefix") format('embedded-opentype'), url("/fonts/Overlock-OTF-webfont.svg#Overlock") format('svg'), /*move after eot*/ url("/fonts/Overlock-OTF-webfont.woff") format('woff'), url("/fonts/Overlock-OTF-webfont.ttf") format('truetype'); font-weight:normal; font-style:normal }/pre>Note: moving svg up in the at-rule causes woff font to be downloaded twice, reducing site speed, bad wpo.