How to use your fonts

Mac OSX

1. Unzip your font package.
2. Open 'Font Book' in Applications.
3. Drag your .otf file(s) into the panel that contains the list of fonts (this will install it).
4. Check the 'User' fonts for your new font.
5. You may need to refresh or restart your programs to see the new font.

Windows

1. Unzip your font package.
2. Click Start.
3. Type Control Panel.
4. Click Appearance and Personalization > Fonts.
5. Drag the Fonts you want to the Desktop or main window.
6. Once you open the Fonts that you dragged, you will see the option Install.
7. Click Install.

1. Unzip your font package.
2. You'll see some .woff files under 'Web'. Copy / paste these files into your font assets folder (or create one if you don't have one already).
3. Declare your web font in your CSS (I put this at the very top): @font-face {
font-family: 'LORE';
src: url('/_assets/_fonts/LORE-Regular.woff2') format('woff2'),
url('/_assets/_fonts/LORE-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

   1. Make sure your paths above are correct.
   2. This code is defining a font-family to use in your site (in this case it is 'LORE').
   3. You will need to add an additional @font-face for every font weight / file you have.
4. Now reference your font in the CSS using the 'font-family' name above, e.g. if you want to use the font on a div called '.my-div', then you would use: .my-div {
font-family: 'LORE', -apple-system, BlinkMacSystemFont, sans-serif;
}

5. Save, upload or do whatever you need to do to save and make it live.
6. Refresh and you should hopefully see your font!

1. On text that has the font applied, select a character with a glyph. You can either:
   1. Highlight and hover over it until the Glyph menu appears
   2. Or open the full Glyphs panel from Type > Glyphs.
2. You can see both Glyphs and Ligatures in the Glyphs panel.

1. On text that has the font applied, select a character with a glyph. You can either:
   1. Highlight and hover over it until the Glyph menu appears
   2. Or open the full Glyphs panel from Type > Panels > Glyphs Panel.

Please note, ligatures can either be Standard or Discretionary. Standard Ligatures are applied by default, Discretionary Ligatures are available through the process below. You can also 'turn off' a Standard Ligature the same way.

1. You can see all Glyphs and Ligatures in the Glyphs panel as per instructions in 'Show glyphs in Illustrator'.
2. Open the OpenType panel through Window > OpenType.
3. On text that has the font applied, highlight the ligature, e.g. 'th'.
4. In the OpenType panel with your character(s) highlighted, you can switch between the Standard Ligature and Discretionary Ligatures with the 'fi' and 'st' icons (if available)

1. You can see all Glyphs and Ligatures in the Glyphs panel as per instructions in 'Show glyphs in Photoshop'.
2. In the Character panel you will see some icons at the bottom of the panel.
3. While your character(s) is highlighted, you can switch between the Standard Ligature and Discretionary Ligatures with the 'fi' and 'st' icons (if available).

1. To see the Advanced Typography options in Microsoft Word, open the Font dialog (press Cmd + D and it will pop up).
2. Under the 'Ligatures' dropdown, you can see the options to enable, disable or use contextual alternates within the font. There are also settings for number handling and stylistic sets.
3. Once you make your changes, you can set these to default across the whole document by pressing the 'Default...' button in the bottom left.
4. If you only want to make changes to a certain area of text, before pressing Cmd + D, highlight the text you want to update and make your changes in the Font dialog. Press OK to apply.
   
   

If you have a Canva Pro, Canva Teams, Canva for Education or Canva for Nonprofits account you can upload your own fonts to Canva.

Supported font files are OTF, TTF and WOFF. You can view more information and find installation instructions on Canva's website: Upload and use Brand Kit fonts

Please note, Canva does not currently support kerning (the fine-tuned spacing between problematic character combinations, such as A and W), so you may see some funny spacing here and there while we wait for Canva to introduce support.