How to use your fonts

Hey 👋🏽 Firstly, thank you for downloading a font! Here are some basic steps to help install your fonts. This guide assumes you have a little html / css knowledge. If you don't, you may want to do a bit of Googling or asking around :)

🕸 Web fonts (.woff, .woff2)

  1. Unzip your package 😉 (the font kind).
  2. You'll see some .woff files. Copy / paste these files into your fonts 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 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 apply your font in the CSS using the 'font-family' name above, e.g. if you want to use the font on your '.myDiv' div, then you would use: .myDiv {
    font-family: 'LORE', -apple-system, BlinkMacSystemFont, sans-serif;
    }
  5. Save, upload or whatever you need to do to save and make it live.
  6. Refresh and you should hopefully see your font!

👩🏻‍💻 Desktop fonts (.otf)

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.

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.

How to use glyphs & ligatures

A ligature occurs where two or more letters or 'elements' are joined as a single glyph, e.g. ee or st. Ligatures allow for more varied type, particularly in scripts or handwriting (think double letters or cursive).

Before following the below instructions, please:

  1. Install your font as per 'desktop' instructions above.
  2. You may need to restart Illustrator if you already have it open.

Glyphs: In Adobe Illustrator

  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 appearsglyph-hover
    2. Or open the gull Glyphs panel from Text > Glyphs.file-menu
  2. You can see both Glyphs and Ligatures in the Glyphs panel.glyphs-panel

Ligatures: In Adobe Illustrator

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 previous instructions.
  2. Open the OpenType panel through Window > OpenType.
  3. On text that has the font applied, highlight the ligature, e.g. 'th'.ligature-highlight
  4. In the OpenType panel you can switch between the Standard Ligature and Discretionary Ligatures with the 'fi' and 'st' icons.ligatures

👈🏼 Back home