Canvas Docs

Changing Fonts

Changing Fonts

Canvas uses two font families by default: a body font and a secondary (heading and accent) font. Both are wired to CSS variables, so swapping fonts is a matter of loading the new font and pointing the variables at it.

The default fonts

In the :root of style.css:

:root {
    --cnvs-body-font: "Inter", sans-serif;
    --cnvs-secondary-font: "Playfair Display", serif;
}
  • --cnvs-body-font is used for general body text.
  • --cnvs-secondary-font is used for select headings and accents.

They are loaded from Google Fonts in the <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">

Swapping a font

There are two steps. First, load the new Google Font in the <head>. For example, to use Poppins and Lora:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Lora:ital@0;1&display=swap" rel="stylesheet">

Second, point the variables at the new families. Do this in css/custom.css so it overrides the default and survives updates:

:root {
    --cnvs-body-font: "Poppins", sans-serif;
    --cnvs-secondary-font: "Lora", serif;
}

Doing it in SASS instead

For a permanent change compiled into style.css, edit sass/_variables.scss and rebuild:

$body-font      : "Poppins", sans-serif;
$primary-font   : $body-font;
$secondary-font : "Lora", serif;

Note that $primary-font inherits from $body-font by default, so setting the body font also updates the primary font unless you override it.

Tips

  • Keep the fallback (sans-serif or serif) at the end of the value so text still renders while the web font loads.
  • Only request the weights you use in the Google Fonts URL. Fewer weights means a faster load.
  • The &display=swap parameter shows fallback text immediately and swaps in the web font when ready, which avoids invisible text on slow connections.

Usage

:root {
	--cnvs-body-font: "Inter", sans-serif;
	--cnvs-primary-font: "Inter", sans-serif;
	--cnvs-secondary-font: "Playfair Display", serif;
}

Adding New Fonts

  1. 1

    Using Google Fonts

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">

    In order to change the Fonts, you will need to Edit the Above Links with your Chosen Google Fonts.

  2. 2

    Using Self-Hosted Fonts

    If you plan to use a Self-Hosted font, use the following code possibly at the Top of the style.(scss|css) File:

    @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

    More Examples for using Self Hosted Fonts.

Was this page helpful?

Related docs

Color SchemesTheme CustomizationDark Mode