Informal Type Services℠

Informal Type Services℠

PRIVACY POLICY

TERMS & CONDITIONS

EULA & Licenses

FAQ

HOW-TO

How to use your fonts?

Thank you for choosing an Informal Type font!

We’ve put together some short guides to help you install your fonts on desktop and web, along with tips for activating glyphs and ligatures in common design programs.

If you can’t find what you’re looking for here, or if you need more details, don’t hesitate to reach out—we’ll be glad to help.

— Informal Type

[01] Installing 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.
  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.

[02]  Installing Web fonts (.woff, .woff2)

  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):
  4. @font-face {
    font-family: 'ITS_Anafor';
    src: url('/_assets/_fonts/ITS_Anafor.woff2') format('woff2'),
    url('/_assets/_fonts/ITS_Anafor.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 'ITS_Anafor').
    3. You will need to add an additional @font-face for every font weight / file you have.
  5. 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: 'ITS_Anafor', -apple-system, BlinkMacSystemFont, sans-serif;
    }
  6. Save, upload or do whatever you need to do to save and make it live.
  7. Refresh and you should hopefully see your font!

[03]  Help?

If you have any questions feel free to email me and I'll see how I can help.
info@informaltype.com

PRIVACY POLICY

TERMS & CONDITIONS

EULA & Licenses

FAQ

HOW-TO

How to use your fonts?

Thank you for choosing an Informal Type font!

We’ve put together some short guides to help you install your fonts on desktop and web, along with tips for activating glyphs and ligatures in common design programs.

If you can’t find what you’re looking for here, or if you need more details, don’t hesitate to reach out—we’ll be glad to help.

— Informal Type

[01] Installing 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.
  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.

[02]  Installing Web fonts (.woff, .woff2)

  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):
  4. @font-face {
    font-family: 'ITS_Anafor';
    src: url('/_assets/_fonts/ITS_Anafor.woff2') format('woff2'),
    url('/_assets/_fonts/ITS_Anafor.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 'ITS_Anafor').
    3. You will need to add an additional @font-face for every font weight / file you have.
  5. 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: 'ITS_Anafor', -apple-system, BlinkMacSystemFont, sans-serif;
    }
  6. Save, upload or do whatever you need to do to save and make it live.
  7. Refresh and you should hopefully see your font!

[03]  Help?

If you have any questions feel free to email me and I'll see how I can help.
info@informaltype.com