liveBook · Manning

WOFF

As explained in Web Design Playground

A web font file format designed for efficient delivery and use in web browsers.

WOFF, the Web Open Font Format, is a font file format designed for delivering fonts to web browsers. For modern sites, WOFF and WOFF2 are usually the formats to consider. section 18.9

Think of browser font support as a small compatibility checklist:

  • WOFF works in Internet Explorer 9 and later, Firefox 3.6 and later, and Chrome 6 and later. section 18.9
  • WOFF2 is a newer format supported by later versions of Edge, Chrome, Firefox, Opera, Safari, iOS Safari, and Android. section 18.9
  • Use only fonts whose licenses permit hosting them for the intended personal or commercial site. section 18.9
@font-face {
    font-family: 'Font Name';    #1  
    src: url('font_filename.woff2') format('woff2'),
         url('font_filename.woff') format('woff');
}

Pair WOFF2 with WOFF in @font-face so browsers can select a supported format. section 18.9

How Web Design Playground covers it

How deep it goes
Compares font formats and browser support, then demonstrates a two-format @font-face declaration.
Examples
Uses a short @font-face rule containing WOFF2 and WOFF URLs.
What you can do after
Configure browser-delivered fonts with WOFF and WOFF2 source declarations.
How it connects
Links web fonts with WOFF2, EOT, TrueType, OpenType, SVG, @font-face, browser support, and font licensing.

Also explained in

Compare how 2 books explain WOFF →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground. The section links point to the parts of the book it draws on.