Follow

How do I use a Google 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 uses fonts from Google Fonts, which are fonts already hosted online. For the case where the font is not available on Google Fonts, you will need to have the font files hosted on another domain. 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, see How Do I Use A Self-Hosted Stylesheet And Font On My Page, Or A Section Of My Page?

Setting a Google Font for the entire page

  • Find the font you want on Google Fonts and select the font name to open its page. This example uses Merienda.
  • Select “Select this font” - you will see a bar appear at the bottom of the page which says, “1 Family Selected”
  • Select the bar to open the modal
  • Copy the line of code in the first gray box
    • In this case:
 <link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">
    • Yours should look similar. Copy the whole string, from the opening angle bracket to the closing angle bracket. Leave this window open, you will be coming back to it.
  • In a separate tab, open Canvas for your event, and navigate to or create your sitepage.
  • 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 you copied from Google Fonts.
  • In the Google Fonts tab, copy the content from the second gray box. In this example, it looks like this:
font-family: 'Merienda', 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> 
* { } 
</style>
  • Place your cursor in between the { and } and paste what you copied from Google Fonts. Altogether, it should look something like this:
<link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">
<style>
* { font-family: 'Merienda', 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://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">
<style>
* { font-family: 'Merienda', cursive !important; }
</style>
  • Select “Save” to see your font change.

 

Set a Google Font for one or more pieces of text

  • Find the font you want on Google Fonts and click on the font name to open its page. This example uses Indie Flower.
  • Click “Select this font” -- you will see a bar appear at the bottom of the page saying “1 Family Selected”
  • Click on the bar to open the modal.
  • Copy the line of code in the first gray box. Copy the whole string, from the opening angle bracket to the closing angle bracket. Leave this window open, you will be coming back to it. In this case, it looks like:
<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 Google Fonts.
  • In the Google Fonts tab, copy the content from the second gray box.Yours should start with “font-family” and end with a semi-colon. In this example, it looks like this: 
font-family: 'Indie Flower', cursive;
  • 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 Google Fonts. Altogether, it should look something like this:
<link href="https://fonts.googleapis.com/css?family=Merienda" 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://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">
<style>
  .indieflower { font-family: 'Indie Flower', cursive !important; }
</style>
  • Hit Save. You will not see anything appear different on your page yet! Keep following the instructions.
  • Now, 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.
  • Hit 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.
  • 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