Canvas Docs

The Font Library

Every font dropdown in Canvas, in Theme Options and on individual blocks, offers the fonts your site has actually loaded. The Font Library is where you decide what that list contains. You reach for it when the family you want is missing from a Font Family dropdown, when you are moving a brand typeface onto the site, or when you want to stop loading icon sets you never use.

Find it under Canvas > Typography. The screen is titled Canvas Font Library and is divided into four tabs: Google Fonts, Adobe Fonts, Custom Fonts and Icon Packs. Adding a font here only makes it available. Applying it to your headings and body copy happens afterwards, in Canvas > Theme Options > Typography.

How To Add A Google Font

Open the Google Fonts tab and search for the family by name. The catalogue is large, so narrow it before you browse: sort by Name: A to Z, Name: Z to A, Most Styles or Fewest Styles, and filter by category with All, Sans Serif, Serif, Display, Handwriting or Monospace. Each result previews in its own typeface, and you can replace the preview text and change the preview size to judge a face at the size you will actually set it in.

Select the font to add it to Your Font Library, the list of chosen families lower down the tab. Each family there carries its own weights, from 100 through 900, and only the weights you tick are requested from Google. This is the setting that matters most for performance: every extra weight is another file the visitor downloads, so add the two or three you will genuinely use rather than the whole family.

Select Save Changes when you are done. The families you saved now appear in every Font Family dropdown on the site.

How To Connect Adobe Fonts

Adobe Fonts, formerly Typekit, serves your fonts from a web project rather than from files you hold, so connecting it takes two pieces of information from your Adobe account.

Open the Adobe Fonts tab and complete both fields:

  • Web Project URL The CSS embed URL for your project, which looks like https://use.typekit.net/abc1234.css. In Adobe Fonts, find it under Embed Code, then Add to web project, then the CSS link.

  • Font Family Names The exact family names from that project, one per line. Canvas cannot read the names out of the stylesheet, so this list is what populates the Font Family dropdown. A name that does not match the project exactly will appear in the dropdown and then fail to render.

Select Save Changes. The tab shows a Connected badge once a project URL is saved.

How To Upload Your Own Font

Use the Custom Fonts tab when the typeface is licensed to you directly, which is usually the case for a brand font. Canvas accepts WOFF2 and WOFF, the two formats worth serving on the web.

Under Add Custom Font, complete the entry and select Add Font:

  • Display Name The label shown in the font dropdown, so write it the way you want to read it later, such as Acme Grotesk.

  • CSS Font Family The exact name used in font-family CSS. Avoid spaces and use dashes instead, such as AcmeGrotesk.

  • Font Weight The weight this file represents, from Thin through Black. One entry describes one weight, so a family with a regular and a bold is two entries sharing a CSS Font Family and differing in weight.

  • WOFF2 File The recommended format for modern browsers. Paste a URL or select the file from the Media Library.

  • WOFF File A fallback for older browsers. Optional, and worth skipping unless you know you need it.

Everything you add is listed under Uploaded Fonts with its Name, Family, Weight and Files, and each row has a Remove control.

How To Control Which Icon Packs Load

Canvas ships several icon fonts, and a pack that no page uses is still a stylesheet the visitor downloads. The Icon Packs tab is where you turn off the ones you do not need.

Enable Icon Packs is the master switch. Turn it off and no icon font stylesheets load on the front end at all. With it on, enable the built in packs individually:

  • Font Awesome 6 The Solid, Regular and Brands sets. Prefixes: fa-solid, fa-regular, fa-brands.

  • Bootstrap Icons Over 2,000 open source icons. Prefix: bi-.

  • Unicons More than 1,600 line style icons. Prefix: uil-.

Turn a pack off only once you are sure nothing uses it. Icons that were placed from a disabled pack stop rendering, leaving an empty space where the glyph was.

Where Fonts Are Applied

The Font Library loads fonts. It does not assign them. Once a family is in the library, set where it is used in Canvas > Theme Options > Typography, which controls the site wide body and heading families, and on individual blocks through their own typography controls when one element needs to differ.

Two settings therefore work together, and it is worth keeping the difference in mind when something looks wrong: a font missing from a dropdown is a Font Library problem, while a font that is available but not being used is a Theme Options problem.

Was this page helpful?