How deeply does Web Design Playground, Second Edition cover web font?

Defines hosted font files, explains @font-face and hosting choices, and demonstrates third-party setup without detailing custom file hosting.

Web font

As explained in Web Design Playground, Second Edition

A web font is a font made available to a web page through web resources rather than requiring installation on the user's device.

A web font is a font file hosted on the web and loaded by a page through CSS, so visitors can see the intended typeface without installing it. The @font-face rule tells the browser where to find the files. Unlike system fonts, web fonts make the page’s typography more predictable across devices. section 18.2

Choose where the font files live:

Use a third-party host such as Google Fonts, Fonts.com, or Adobe Fonts. These services generally handle font licensing and hosting, making setup easier. section 18.3
Host the font files on your own site. This avoids relying on a remote font server, but requires managing the files and permissions yourself. section 18.2
Remember the trade-off: remote fonts may add loading time, especially when many font files are linked, although major services optimize delivery. section 18.3

Load and apply a hosted font

Select the typeface and styles you need on the font host, copy its generated link tags into the page head before your own stylesheet, then apply the font in CSS. For example, load Lato and use it with a sans-serif fallback: p { font-family: Lato, sans-serif; } section 18.3

&lt;link rel=&quot;preconnect&quot; href=&quot;<a class="urlb" href="https://fonts.googleapis.com">https://fonts.googleapis.com</a>&quot;&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;<a class="urlb" href="https://fonts.gstatic.com">https://fonts.gstatic.com</a>&quot; crossorigin&gt;
&lt;link href=&quot;<a class="urlb" href="https://fonts.googleapis.com/css2?family=Lato">https://fonts.googleapis.com/css2?family=Lato</a>:ital,wght@0,400;1,400;1,700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;

Inspect the generated link tags that connect a page to Google Fonts and request regular, italic, and bold styles. section 18.3

How Web Design Playground, Second Edition covers it

Cover of Web Design Playground, Second Edition

liveBook manning.com

Read Web Design Playground, Second Edition on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

CSS in Depth, Second EditionA web font is a font made available to a web page through font resources that can be downloaded or selected locally by the browser.
liveBook manning.com

Web Design PlaygroundA font file delivered over the web for use in rendering text on a page rather than relying only on locally installed fonts.

Compare how 3 books explain web font →

Related concepts

@font-faceuses · The CSS @font-face at-rule defines a font resource and descriptors that associate it with a font family and style.
font-displayconfigured by · The CSS font-display descriptor controls how text is rendered while a web font loads or is unavailable.
fonthas part · A font is a set of glyphs with a particular typeface design and rendering characteristics such as size, weight, style, or width.
font-size propertyhas part · The CSS font-size property specifies the nominal size of an element’s rendered text.
font stylehas part · A font style is a stylistic variant of a typeface distinguished by properties such as weight, width, slant, or spacing.
link elementused by · The HTML link element declares a relationship between a document and an external resource or resource metadata.

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