Function

@google-font

Load a font from Google Fonts by name and use it as the font-family.

Syntax

  • font-family: @google-font("<name>")

The call is replaced by the family name in double quotes, which CSS reads whatever its words, as in "Press Start 2P". Quotes around the argument are optional: @google-font(Alfa Slab One) works too. A stylesheet link is added to the page on first use, and the font is embedded when the doodle is exported with export(). It also works as the font of letters traced by @shape, which draw again once the font has loaded.

Examples

@grid: 4 / 60vmin _1px;
background: #000;
color: #fff;
font-family: @google-font("Alfa Slab One");
font-size: 2em;
@content: @p([A-Z]);

See also