• Unicode fonts can contain thousands of glyphs.
• There are four font formats:WOFF2,WOFF,EOT,and TTF.
• Some font formates require the use of compression.

Webfont formats:

• EOT:IE only
• TTF:partial IE support
• WOFF:widest support but not available in some older browsers
• WOFF2:in progress for many browsers

There is no single format that works in all browsers,which means that we need to deliver multiple fomats to provide consistent experience:

• Serve WOFF 2.0 variant to browsers that support it.
• Serve WOFF variant to the majority of browsers.
• Serve TTF variant to old Android (below 4.4) browsers.
• Serve EOT variant to old IE (below IE9) browsers.

Reducing font size with compression

A font is a collection of glyphs, each of which is a set of paths describing the letter form. The individual glyphs are different, but they contain a lot of similar information that can be compressed with GZIP or a compatible compressor:

• EOT and TTF formats are not compressed by default. Ensure that your servers are configured to apply GZIP compression when delivering these formats.
• WOFF has built-in compression. Ensure that your WOFF compressor is using optimal compression settings.
• WOFF2 uses custom preprocessing and compression algorithms to deliver ~30% file-size reduction over other formats.

Note: Consider using Zopfli compression for the EOT, TTF, and WOFF formats. Zopfli is a zlib compatible compressor that delivers ~5% file-size reduction over gzip.

Define a font family with @font-face

• Use the format() hint to specify multiple font formats.
• Subset large Unicode fonts to improve performance. Use Unicode-range subsetting and provide a manual subsetting fallback for older browsers.
• Reduce the number of stylistic font variants to improve the page- and text-rendering performance.

1. The browser requests the HTML document.
2. The browser begins parsing the HTML response and constructing the DOM.
3. The browser discovers CSS, JS, and other resources and dispatches requests.
4. The browser constructs the CSSOM after all of the CSS content is received and combines it with the DOM tree to construct the render tree.
   • Font requests are dispatched after the render tree indicates which font variants are needed to render the specified text on the page.
5. The browser performs layout and paints content to the screen.
   • If the font is not yet available, the browser may not render any text pixels.
   • After the font is available, the browser paints the text pixels.

The “race” between the first paint of page content, which can be done shortly after the render tree is built, and the request for the font resource is what creates the “blank text problem” where the browser might render page layout but omits any text.