Changing Fonts

Change Fonts easily using the included css/fonts.css file. By default, Canvas uses 3 Fonts namely: Poppins, Lato & PT Serif from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.

Adding New Fonts

  • Using Google Fonts
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Poppins:300,400,500,600,700|PT+Serif:400,400i&display=swap" rel="stylesheet" type="text/css" />

    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.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.

  • Edit the css/fonts.css File

    Replace the font-family CSS Property in the css/fonts.css File with your Newly Added Fonts.

  • Apply the css/fonts.css File

    To apply the New Fonts to your Website, add the following code in the Document <head> Section preferably after the style.css File:

    <link rel="stylesheet" href="css/fonts.css" type="text/css" />

Last Modified: February 24, 2022

Need Help?