liveBook · Manning

Webfont Generator

As explained in Web Design Playground

A service that converts font files into web-usable font formats and associated CSS.

A Webfont Generator turns a licensed font file, such as TTF, into web-ready formats and packages the CSS needed to use it on a website. section 18.9

Use it in a few friendly steps:

  • Upload the downloaded font file to the Webfont Generator. section 18.9
  • Keep WOFF and WOFF2 selected by default, or choose additional formats through Expert options. section 18.9
  • Copy the generated @font-face CSS, placing WOFF2 before WOFF, then use its font-family value on the element you want to style. section 18.9

A generated font setup

The package may produce an @font-face rule for a font and let you apply it with font-family: 'Font Name';. section 18.9

@font-face {
    font-family: 'Font Name';    #1  
    src: url('font_filename.woff2') format('woff2'),
         url('font_filename.woff') format('woff');
}

Browse the compact @font-face pattern showing WOFF2 before WOFF. section 18.9

How Web Design Playground covers it

How deep it goes
Explains the conversion workflow and generated @font-face usage, while deferring detailed syntax to an external example.
Examples
Uses a Bree Serif @font-face rule and a WOFF2-before-WOFF code pattern.
What it assumes
Assumes access to a licensed downloadable font file and introduces the conversion and CSS setup process.
What you can do after
Apply it via CSS by generating font files, copying @font-face code, and assigning its font-family value to an element.
How it connects
Connects font conversion with TTF, WOFF, WOFF2, CSS, @font-face, and the font-family property.
Cover of Web Design Playground
liveBookmanning.com
Read Web Design Playground on liveBook Get the book at manning.com

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.