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="[email protected];400;500;600;700&family=Playfair+Display:[email protected];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.

Last Modified: March 10, 2023