Self-host website fonts: check licences, loading and the finished text

Decide what problem the move should solve

Write down the reason for changing delivery: removing an unnecessary third-party dependency, controlling file versions, making a deployment more predictable or investigating a measured loading delay. “Local is always faster” is not an adequate acceptance condition.

web.dev’s font guidance discusses hosting, discovery and transfer tradeoffs. Your result depends on the actual files, connections, cache and CSS path. Moving a large unneeded font bundle onto a slow origin can leave the page worse than a carefully selected existing setup.

A system-font stack is another option when the design does not need a particular downloaded face. That changes the visual design and needs review, but it can remove a font download rather than relocating it. Do not package an installed commercial desktop font for visitors just because the owner’s computer can display it.

Inventory what the site really requests and uses

Choose representative pages: an article, a long heading, a form, navigation and any specialist symbols. Inspect their delivered styles and the font requests made by the browser. Record the family, style, weight, file URL and component that requests each resource.

An editor’s selected family is not a complete inventory. A theme, widget, icon system or plugin can introduce another font elsewhere. Equally, declaring a family in CSS does not establish that every declared file downloads on every page.

For a fictional workshop site, the visible design might use regular body text, bold headings and italic source notes, while an unused landing-page template still requests two extra weights. Decide which styles the actual publication needs before copying the whole provider package.

Record a baseline screenshot and request list in a fresh visitor context. Keep it distinguishable from the proposed configuration so that later removal of an external request is a verified observation rather than an assumption.

Read the licence belonging to each family and file

A licence for desktop use does not necessarily permit web distribution. Check the exact licence supplied with the font, its permitted website use and any requirements for redistribution, conversion or modification. Retain the licence and provenance beside the preserved source files.

The official Google Fonts repository states that its fonts permit redistribution subject to their individual terms, and that each family directory contains its licence. It also identifies different licences and reserved-name requirements. Read that family-specific file rather than treating the repository name as the licence itself.

For a font under the SIL Open Font License, consult the OFL FAQ when distributing or modifying webfonts. Its guidance treats subsetting as modification and explains relevant naming and licensing considerations. Those rules cannot be assumed for a font supplied under a different commercial agreement.

Keeping a private licence copy is not the whole distribution obligation. Preserve the font’s copyright and licence metadata, and include any accompanying notices and licence text that the actual licence requires with the deployed distribution. Check that conversion or subsetting has not stripped those details; for OFL fonts, review the FAQ’s webfont and distribution conditions before publishing the files.

If permission is unclear, keep the existing permitted delivery method, obtain clarification or choose a suitably licensed alternative. Renaming a file does not create redistribution rights. This workflow does not determine whether the wider website satisfies privacy law; moving one dependency cannot certify the rest of its data handling.

Prepare the smallest complete set, not the smallest broken set

Start with the weights and styles the inventory actually requires. Keep real italic and bold faces where the design uses them, or the correct supported range when using a variable font. A variable file can replace several static files in some designs, but its total contents are not automatically smaller for every site.

Preserve language coverage deliberately. Article text, names, currency symbols, punctuation and user-entered labels may need characters absent from a narrowly chosen subset. A website publishing English instructions can still contain accented names or a euro price.

Use the licensed source or documented release to obtain the needed webfont files. WOFF2 is a practical modern format to consider; confirm the browser requirements for your audience. Converting or subsetting a file is a modification decision to check against its licence, not merely a compression checkbox.

Keep the original download, release identity and licence separate from deployment assets. If a future update changes glyph coverage or metrics, that provenance helps you compare the intended version rather than replacing files whose origin is unknown.

@font-face {
  font-family: "Workshop Text";
  src: url("/assets/fonts/workshop-text-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.article-body {
  font-family: "Workshop Text", system-ui, sans-serif;
}

Choose font-display for the reading experience

The font-display reference explains the tradeoffs. Swap allows fallback text and later replacement; fallback limits the period for swapping; optional can leave the fallback in use when the preferred face is not ready in time. These choices affect appearance as well as loading.

The example uses swap to illustrate one option, not to declare it best for every page. A late replacement can change line breaks and layout. Inspect a long heading, a paragraph, a button and a table in both the preferred and fallback faces.

Avoid making essential information depend on a decorative font loading. If a control uses an icon font, check that a failed font does not erase its understandable name or make it unusable. The failure path belongs in the review, not only the ideal screenshot.

Verify discovery and resist unnecessary preloads

Locate how the browser discovers the font declaration: an ordinary stylesheet, an imported stylesheet or a later script. A self-hosted file can still arrive late if the CSS pointing to it is delayed. Inspect the request chain before adding another performance plugin.

Preload only a justified early resource and confirm that it matches the file the page actually uses. Preloading every language subset and weight can request assets the visitor never needs. Keep a record of both discovered and downloaded files when comparing the proposed change.

Compare cold and warm visits under consistent conditions. The absence of a third-party hostname in one cached run is not enough; inspect fresh network activity too. If another component reintroduces the old font source, find its owner instead of adding duplicate local declarations on top.