Using fonts, glyphs and ligatures | TYPEHEIST

How to use your fonts

Firstly, thank you for downloading a TYPEHEIST 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 ask someone who can help :)

Installing: Web fonts (.woff, .woff2)

View
  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!

Installing: Desktop fonts (.otf)

View

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.

Glyphs vs ligatures

View
Photoshop Font Ligatures Photoshop Font Ligatures

LIGATURE

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

Photoshop Font Ligatures

GLYPH

An alternate or visual variant for a character. You may select different glyphs to create distinction where the same characters might reappear.

Show glyphs in Illustrator

View

  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 full Glyphs panel from Type > Glyphs.file-menu
  2. You can see both Glyphs and Ligatures in the Glyphs panel.glyphs-panel

Show glyphs in Photoshop

View

  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 appearsGlyphs
    2. Or open the full Glyphs panel from Type > Panels > Glyphs Panel.Glyphs Panel

Ligatures: Adobe Illustrator

View

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'.ligature-highlight
  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)ligatures

Ligatures: Adobe Photoshop

View
  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).Photoshop Font Ligatures


A bit stuck? Feel free to email me and I'll see how I can help.