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)
- Unzip your package 😉 (the font kind).
- You'll see some .woff files. Copy / paste these files into your fonts folder (or create one if you don't have one already).
- Declare your web font in your CSS (I put this at the very top):
src: url('/_assets/_fonts/LORE-Regular.woff2') format('woff2'),
- Make sure your paths above are correct.
- This is defining a font-family to use in your site (in this case it is 'LORE').
- You will need to add an additional @font-face for every font weight / file you have.
- 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:
font-family: 'LORE', -apple-system, BlinkMacSystemFont, sans-serif;
- Save, upload or whatever you need to do to save and make it live.
- Refresh and you should hopefully see your font!
👩🏻💻 Desktop fonts (.otf)
- Unzip your font package.
- Open 'Font Book' in Applications.
- Drag your .otf file(s) into the panel that contains the list of fonts (this will install it).
- Check the 'User' fonts for your new font.
- Unzip your font package.
- Click Start.
- Type Control Panel.
- Click Appearance and Personalization > Fonts.
- Drag the Fonts you want to the Desktop or main window.
- Once you open the Fonts that you dragged, you will see the option Install.
- 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:
- Install your font as per 'desktop' instructions above.
- You may need to restart Illustrator if you already have it open.
Glyphs: In Adobe Illustrator
- On text that has the font applied, select a character with a glyph. You can either:
- Highlight and hover over it until the Glyph menu appears
- Or open the gull Glyphs panel from Text > Glyphs.
- You can see both Glyphs and Ligatures in the 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.
- You can see all Glyphs and Ligatures in the Glyphs panel as per previous instructions.
- Open the OpenType panel through Window > OpenType.
- On text that has the font applied, highlight the ligature, e.g. 'th'.
- In the OpenType panel you can switch between the Standard Ligature and Discretionary Ligatures with the 'fi' and 'st' icons.
👈🏼 Back home