Understanding Type-face Format
Different browsers support different formats for fonts. If you are using @font-face for your website, you will need to supply your font in several variations to reach all browsers. You can use www.fontsquirrel.com to convert your font. The website will also provide you with the CSS code for the @font-face rule.
Browser | Format | |||
---|---|---|---|---|
  | eot | woff | ttf/otf | svg |
Chrome (all) | ✓ | |||
Chrom 6+ | ✓ | ✓ | ✓ | |
Firefox 3.5 | ✓ | |||
Firfox 3.6+ | ✓ | ✓ | ||
IE 5-8 | ✓ | |||
IE 9+ | ✓ | ✓ | ? | |
Opera 10+ | ✓ | ✓ | ||
Safari 3.1+ | ✓ | ✓ | ||
IOS <4.2 | ✓ | |||
IOS 4.2+ | ✓ | ✓ |
@font-face allows you to use a font, even if it is not installed on the computer of the person using, by allowing you to specify a path to a copy of the font, which will be downloaded to the user's machine if the user currently doesn't have the specific type face installed.
There are several ways to use fonts. However, typefaces are subject to copyright, so the techniques you can choose from are limited by their respective licenses. It is IMPORTANT that the license for the font permits it to be used in this way.
You need to upload your font to your site so that user can download it.
Because the browser need to download the font file in order to show it, users might see something known as a flash of unstyled content (FOUC) or flash of unstyled text (FOUT). To minimize this behavior you can delete any unnecessary glyphs from the font, or host the font on a content delivery network (a special type of web hosting that offers faster delivery of files).
Different browsers also support different formats. If you do not have all of these formats for your font, you can upload the font to a website called FontSquirrel where they will convert it for you.
http://www.fontsquirrel.com/tools/webfont-generator
Some formats you will need:
1. eto
2. woff
3. tff/otf
4. svg
To use @font-face, insert this in your css file:
@font-face {
font-familly:"fontfamily"
src: url('font/typeface.eot') /*check different format: eot woff ttf otf svg*/
}
h1 {font-family:fontfamily }
There are several ways to use fonts. However, typefaces are subject to copyright, so the techniques you can choose from are limited by their respective licenses. It is IMPORTANT that the license for the font permits it to be used in this way.
You need to upload your font to your site so that user can download it.
Because the browser need to download the font file in order to show it, users might see something known as a flash of unstyled content (FOUC) or flash of unstyled text (FOUT). To minimize this behavior you can delete any unnecessary glyphs from the font, or host the font on a content delivery network (a special type of web hosting that offers faster delivery of files).
Different browsers also support different formats. If you do not have all of these formats for your font, you can upload the font to a website called FontSquirrel where they will convert it for you.
http://www.fontsquirrel.com/tools/webfont-generator
Some formats you will need:
1. eto
2. woff
3. tff/otf
4. svg
To use @font-face, insert this in your css file:
@font-face {
font-familly:"fontfamily"
src: url('font/typeface.eot') /*check different format: eot woff ttf otf svg*/
}
h1 {font-family:fontfamily }