What font format should I use for my site

问题:

I want to use a font for my website, I got the overall research and found variety of formats for fonts, Now i want to know that what is the standard format? Or What are the standard formats?

.TTF (True Type Font)
.EOT (Embedded OpenType)
.OTF (open type font)
.SVG (Scalable Vector Graphics)
.WOFF (Web Open Font Format)

So far, I've used all of these formats, something like this:

@font-face {
    font-family: 'Font';
    src: url('Font.eot'); /* IE9 Compat Modes */
    src: url('Font.eot?#') format('eot'), /* IE6–8 */
         url('Font.ttf') format('truetype'), /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
         url('Font.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('Font.otf') format('opentype'),
         url('Font.svg') format('svg');
}

But in this case, the site is too heavy (size of all formats is almost 1MB) , So what should i do to be more optimized ?

回答1:

Understanding Font File Types

• WOFF / WOFF2

WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts.

• SVG / SVGZ

ideal for mobile use

• EOT

supported only by IE

• OTF / TTF

The WOFF format was initially created as a reaction to OTF and TTF, in part, because these formats could easily (and illegally) be copied

• ON THE OTHER SIDE:

Google Fonts offers this as a way to use their fonts.

• SOME PERFORMANCE TIPS

Watch the file size

Fonts can be surprisingly heavy, so lean towards options that offer lighter versions. For example, favor a font set that is 50KB versus one that weighs 400KB. Limit the character set, if possible

Do you really need the bold and black weights for one font? Limiting your font sets to load only what is used is a good idea and there are some good tips on that here. Consider system fonts for small screens

Many devices are stuck on crappy connections. One trick might be to target larger screens when loading the custom font using @media.

In this example, screens smaller than 1000px will be served a system font instead and screens that wide and above will be served the custom font.

• CONCLUSION: Use OTF/TTF(all browsers) & EOT(I.E) for Desktop screens and use system fonts for small screens as they render faster. And do consider google fonts. Best choice so far.

回答2:

I just tested chrome (43) and firefox (37) and ie (10) - in all cases only one font format (respectively: woff, woff and eot) of the five was downloaded. Based on that small sampling, it seems* that including the various file types in your @font-face declaration doesn't have a negative impact on the user.
*If you happen to know how other browsers behave, let us know.