Follow

How do I use a self-hosted stylesheet and font on my page, or a section of my page?

In addition to the fonts available in the editor, Canvas allows for custom fonts. This guide is for self-hosted stylesheets and fonts. These instructions will not work if the font file is only saved to your computer.

Note that after following the steps below, the font changes automatically when setting for a whole page, or after adding a class when adding a font for a section of text. The font will not appear in the font dropdown menu, and these steps will need to be repeated for other pages where the custom font should appear.

It is STRONGLY recommended that the custom font is added after the text has been styled (font, size, spacing, weight, and color.)

To use a self-hosted stylesheet and font, you will need:

  • The URL of a hosted stylesheet for your font. If your font is being used on the web, there is probably already a stylesheet for the font. The URL for the stylesheet and hosted fonts must be securely hosted - the URL must begin with HTTPS.
  • The name of the font, as it is labeled in the stylesheet

The stylesheet is not the font file itself, but a document that tells the browser how to find the font. It should end with the filetype .css and NOT .ttf, .woff, or .off. The font itself will be referenced in the stylesheet, and must already be hosted in order for it to render on all users’ computers.

To use a Google Font, see How do I use a Google Font on my page, or a section of my page?

Setting the font for the entire page

Your code should look similar to the code below, with the bolded link to the CSS stylesheet, and the bolded font names, replaced with the correct link and font name for your stylesheet.

<link href="https://link_to_css_stylesheet.css" rel="stylesheet">
<style>
* { font-family: 'font_name' !important; }
</style>

To add this code to Canvas, and display your custom font:

  • In Canvas, drag in a “Custom Tracking” block. To make future edits or removal easier, we recommend adding the block to the top or bottom of the page.
  • Double-click to open the HTML editor.
  • In the box, paste in the code.
  • Select "Save" to see your font change.

Set a custom font for one or more pieces of text

  • Copy the stylesheet URL, from opening angle bracket to closing angle bracket. It should look similar to this: <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
  • In a separate tab, open Canvas for your event, and navigate to or create your sitepage.
  • In Canvas, drag in a “Custom Tracking” block. You can drop it anywhere in your sitepage, but it will be easiest to edit or remove later if you put it at the top or bottom of the page.
  • Double click to open the HTML editor.
  • In the box, paste in the code you copied from your stylesheet. It will look something like this: 
font-family: 'Indie Flower', cursive;

Yours should start with “font-family” and end with a semi-colon.

  • Return to the Canvas tab.
  • In the HTML code box, directly under the code you already pasted in, type 
<style> 
.fontname { } 
</style>

Where “fontname” represents the a name for your font with no spaces. It can be the font’s actual name or any word you will remember. Make sure to put a period before the fontname and no space in between the period and the word.

  • Place your cursor in between the { and } and paste what you copied from your stylesheet. Altogether, it should look something like this:

 

<link href="https://link_to_css_stylesheet.css" rel="stylesheet">
<style>
  .indieflower { font-family: 'Indie Flower', cursive; }
</style>
  • In the part you just pasted in, place your cursor before the semi-colon and type a space, then !important
  • It should look like this:
<link href="https://link_to_css_stylesheet.css" rel="stylesheet">
<style>
  .indieflower { font-family: 'Indie Flower', cursive !important }
</style>
  • Select Save. You will not see anything appear different on your page yet! Keep following the instructions.
  • Next, choose the text on the page that you want to have this custom font. You will change one piece of text at a time. Click on it to see it highlighted in blue.
  • In the right panel, click the + at the top of the panel, under the word “Classes”
  • Type in the name of the font or other word you used to identify it. Remember, do not use spaces. This time, do not type the period at the beginning-- just use the word you chose.
  • Click the enter key and you will see the text change to your custom font. Repeat for any other text you want to set custom fonts for.
  • If you want to use multiple custom fonts, you can follow these instructions for each font. Make sure to keep track of the names you have used to identify the font.

Remove a custom font for one or more pieces of text

  • To remove the custom font, click the “x” next to the label for the font in the “Classes” box in the right panel.
Powered by Zendesk