How to use your fonts

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