path: root/docs/download/index.html

---
layout: default
title: Download Inter
---
{% include defs.html -%}
{% assign download_url = "https://github.com/rsms/inter/releases/download/v4.0-beta9h/Inter-4.0-beta9h.zip" %}

<div class="row"><div><r-grid columns=8>


<r-cell span=row>
  <h1>Downloading Inter version {{ release_version }}…</h1>
  <p>
    <a href="{{download_url}}" class=dim>{{download_url}}</a>
  </p>
</r-cell>


<r-cell span=row>
  <p class=large>
    Inter is <a href="https://github.com/rsms/inter">open source</a>.<br>
    Please consider giving us a small donation to keep this project alive.
  </p>
  <div class=sponsor-buttons>
    <a class=button
       title="Help Inter by becoming a sponsor and donating a coffee or two"
       href="https://github.com/sponsors/rsms">
       Support Inter on GitHub...
    </a>
    <form action="https://www.paypal.com/donate" method="post" target="_top">
      <input type="hidden" name="business" value="rsms@notion.se">
      <input type="hidden" name="no_recurring" value="0">
      <input type="hidden" name="item_name" value="Inter typeface">
      <!-- <input type="hidden" name="item_number" value="Fall Cleanup Campaign"> -->
      <input type="hidden" name="currency_code" value="USD">
      <input class=button type="submit" name="submit" value="or, make a donation via PayPal...">
    </form>
  </div>

</r-cell>


<br>
<br>
<br>


<r-cell span=1-4 span-s=row>
  <h2>Installation instructions</h2>

  <p>
    Show instructions for
    <select id="install-menu">
      <option value="mac">macOS</option>
      <option value="windows">Windows</option>
      <option value="ubuntu">Ubuntu Linux</option>
    </select>
  </p>

  <div id="install-mac" class="install-instructions active">
    <ol>
      <li>Open the "Font Book" application.</li>
      <li>In the main menu, select "File" → "Add Fonts..."</li>
      <li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
      <li>Press the "Open" button</li>
    </ol>
    <p>
      Alternatively, if you prefer not to use Font Book, you can move or
      copy the font files directly into <code>~/Library/Fonts/</code>
    </p>
  </div>

  <div id="install-windows" class="install-instructions">
    <ol>
      <li>Open the zip file you downloaded</li>
      <li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
      <li>Right-click the selected files, choose "Install for all users"</li>
    </ol>
    <p>
      If you have a previous installation of Inter, you should make sure
      to remove those fonts files before installing new ones. You need to
      install the font for all users, as some software requires fonts to
      be global.
    </p>
  </div>

  <div id="install-ubuntu" class="install-instructions">
    <ol>
      <li>Create a ".fonts" directory in your home. (<code>mkdir -p ~/.fonts</code>)</li>
      <li>Copy "Inter.ttc", "Inter-Variable.ttf" and
        "Inter-Variable-Italic.ttf" into your .fonts directory
        (<code>cp Inter.ttc *.ttf ~/.fonts/</code>)
      </li>
    </ol>
    <p>
      You may have to restart apps and/or your window server session.
    </p>
    <h4>Ubuntu Linux Q&amp;A</h4>
    <p>
      Q: I installed the fonts but they don't show up<br>
      A: Try rebuilding the font database:<br>
      <tt>sudo fc-cache -f -v</tt><br>
      Then restart your program(s).
    </p>
    <p>
      Q: Is there a way to tell if Inter was actually installed?<br>
      A: Try running: <tt>fc-list | grep "Inter"</tt>
    </p>
    <p>
      Q: <tt>~/.fonts</tt> is an old thing.
      The new thing is <tt>~/.local/share/fonts</tt><br>
      A: Yes, that is true for recent distributions.
      These distros usually support
      <tt>~/.fonts</tt> as well making these instructions work for everyone.
    </p>
  </div>

  <h4>Variable &amp; Static font files</h4>

  <p>
    Inter fonts comes in two flavors: Variable and Static
    (<code>Inter-Variable*.ttf</code> and <code>Inter.ttc</code>, respectively.)
  </p><p>
    Variable fonts is a new format which allows you to choose any
    weight and optical size. Variable fonts is a relatively new
    technology and may not yet be supported by all your software.
    Inter's variable font is called "Inter Variable" to avoid
    confusion and to allow use alongside the traditional static fonts.
  </p><p>
    Static fonts works with older software and uses a fixed set of
    predefined mixtures of weight and optical size. For example
    "Inter Display Medium" is Inter with maximum optical size and a
    weight of 500.
  </p>

</r-cell>



<r-cell span=5-8 span-s=row>
  <h2>Web use</h2>
  <p>
    If you're making a web page, you can use the following HTML and CSS:
  </p>
    <pre>&lt;!-- HTML in your document's head --&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://rsms.me/&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://rsms.me/inter/inter.css&quot;&gt;

/* CSS */
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}</pre>
  <p>Global <abbr title="Content Delivery Network">CDN</abbr>
    sponsored by <a href="https://cloudflare.com/">Cloudflare</a></p>
</r-cell>



</r-grid></div></div>


<script type="text/javascript">(function(){

let activeInstructions = document.querySelector('.install-instructions.active')

function activateInstructions(id) {
  activeInstructions.classList.remove("active")
  activeInstructions = document.querySelector('#install-' + id)
  activeInstructions.classList.add("active")
}

let installMenu = document.querySelector('#install-menu')
installMenu.onchange = ev => {
  activateInstructions(installMenu.value)
}

if (/linux/i.test(navigator.userAgent)) {
  activateInstructions('ubuntu')
} else if (/windows/i.test(navigator.userAgent)) {
  activateInstructions('windows')
} else if (/mac os/i.test(navigator.userAgent)) {
  activateInstructions('mac')
}

})();</script>


<style type="text/css">

div.row.download {
  font-weight: 460;
}
.dim { opacity:0.4; text-decoration: none }
a.dim:hover { opacity:1 }

.large { font-size: 1.375rem; }
input.button { cursor: pointer }

.sponsor-buttons {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: var(--spacingv);
  font-size: 1.2rem;
}
@media only screen and (max-width: 720px) {
  .sponsor-buttons {
    font-size: 1.375rem;
    flex-direction: column;
    gap: 0rem;
  }
}

.install-instructions { display: none; }
.install-instructions.active { display: block; }


</style>