Changing Fonts

Change Fonts easily by adding the following code in the css/custom.css File. By default, Canvas uses 2 Fonts namely: Inter, & Playfair Display from the Google Fonts Library.

Code Example

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

Adding New Fonts

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.

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.

Changing Fonts

Code Example

Adding New Fonts

Using Google Fonts

Using Self-Hosted Fonts

Related Articles