---
layout: none
---
{%

for file in site.static_files %}{%
  assign _path = file.path | remove_first: "/inter" %}{%
  if _path == "/font-files/Inter.var.woff2" %}{%
    assign inter_var_woff2_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
  endif %}{%
endfor

%}<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/*

Note on font file URLs:
- The "v" parameter is used to ensure that the latest font file is used,
  and not a past cached version.
- The "t" parameters can be used to debug which of the "format(...)" the
  web browser chose (i.e. by using a web browser's developer tools.)

*/

@font-face {
  font-family: 'Inter var experimental';
  font-weight: 100 900;
  font-style: oblique 0deg -10deg;
  font-named-instance: 'Regular';
  src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
       url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
}

/* Fix for Safari where defining font-weight range casues regular style
   to actually be italic. */
@font-face {
  font-family: 'Inter var experimental safari';
  /* DISABLE font-weight: 400 900; */
  font-style: oblique 0deg -10deg;
  font-named-instance: 'Regular';
  src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
       url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
}

/* Alternate two-file setup used for italic where oblique degrees are not
   supported (MS Edge) */
@font-face {
  font-family: 'Inter var single-axis';
  font-weight: 100 900;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("font-files/Inter-roman.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
       url("font-files/Inter-roman.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
}
@font-face {
  font-family: 'Inter var single-axis';
  /*font-weight: 100 900;*/
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("font-files/Inter-italic.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"),
       url("font-files/Inter-italic.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2");
}



html {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-synthesis: none;
  letter-spacing: 0;
  line-height: 1.3;
}

body {
  margin: 0;
  padding: 0;
}

@supports (font-variation-settings: normal) {
  .unsupported {
    display: none;
  }
  html {
    font-family: 'Inter var experimental', sans-serif;
  }
  html.safari {
    font-family: 'Inter var experimental safari', sans-serif;
  }
  html.msedge {
    font-family: 'Inter var single-axis', sans-serif;
  }
}

.single-axis {
  font-family: 'Inter var single-axis', sans-serif;
}

.samples {
  display: flex;
  flex-wrap: wrap;
}
.samples > h2 {
  flex: 1 0 100%;
  padding-left:20px;
  line-height:2;
  padding-top: 1em;
  border-top:1px solid #ccc;
  margin-top: 1em;
}
.weightset {
  /*background: pink;*/
  margin: 20px;
  width: 200px;
  overflow:hidden;
  white-space: nowrap;
}

.intro {
  font-size: 0.7em;
  padding:2em;
  border-bottom: 2px solid #000;
  margin-bottom: 1em;
}
.intro em {
  font-weight: 500;
  font-style: oblique;
}
.intro > * {
  max-width: 800px;
}

.unsupported {
  margin: 2em;
  text-align: center;
}

h1, h2 {
  margin: 0;
  font-size: 2.5em;
  font-weight: 700;
  letter-spacing: -0.025em;
}
h2 {
  font-size: 1.5em;
  letter-spacing: -0.02em;
}
ul {
  padding-left: 1.2em;
}
li {
  margin: 0.5em 0;
}
tt {
  font-family: Conoslas, Menlo, monospace;
  color: #2c5d4e;
}

</style>
</head>
<script>
(function(u){
if (
  u.indexOf('Safari/') != -1 &&
  u.indexOf('Chrome/') == -1 &&
  u.indexOf('Chromium/') == -1
) {
  document.documentElement.classList.add('safari')
} else if (u.indexOf('Edge/') != -1) {
  document.documentElement.classList.add('msedge')
}
})(navigator.userAgent);
</script>
<body>
<div class="intro">
  <h1>Inter variable font test</h1>
  <p>
    Tests how the Inter variable font is rendered by the web browser
    with the traditional style properties <tt>font-weight</tt> and
    <tt>font-style</tt>.
  </p>
  <p>
    We can always use <tt>font-variation-settings</tt> to gain full control
    over variable font axes, which works as expected in all major browsers.
    This document does <em>not</em> make use of <tt>font-variation-settings</tt>.
  </p>
  <p>
    Effective <tt>font-family: </tt><tt id="family-in-use"></tt>
  </p>
  <h2>Known issues with variable fonts:</h2>
  <ul>
    <li>
      <b>Most browsers as of August 2019:</b>
      <ul>
        <li>
          Mapping of negative slant axis to <tt>font-style:italic</tt> has no effect.<br>
        </li>
        <li>
          Mapping of negative slant axis to <tt>font-style:oblique</tt> has no effect.
        </li>
        <li>
          All current stable versions of major web browser supports
          <tt>format("woff2-variations")</tt>
          for font url format in <tt>@font-face</tt> declarations.
      </ul>
    </li>
    <li>
      <b>Safari:</b>
      <ul>
        <li>
          Defining <tt>font-weight</tt> in <tt>@font-face</tt> causes
          slnt axis to be maxed out by default, causing <tt>font-style:normal</tt>
          to be fully slanted/oblique/italic. This is counter-acted by using a
          specific <tt>@font-face</tt> for Safari that doesn't define
          <tt>font-weight.</tt>
          (Last confirmed version: Safari 12.1)
        </li>
        <li>
          <tt>font-synthesis:none</tt> is required or else
          <tt>font-style:italic</tt> causes "double-slant" —
          the slnt axis gets maxed out as expected, but then faux oblique is
          applied on top of it, causing an overly extreme slant.
          This means that <tt>font-style:italic</tt> can't be used in Safari,
          and instead we use <tt>font-style:oblique</tt> which works in all
          major browsers. Note that this effects <tt>&lt;em&gt;</tt> and
          <tt>&lt;i&gt;</tt> which in Safari implicitly has
          <tt>font-style:italic</tt>.
          (Last confirmed version: Safari 12.1)
        </li>
      </ul>
    </li>
    <li>
      <b>Chrome:</b>
      <ul>
        <li>
          Rendering of overlapping shapes causes "blobs" or "ink bleed".
          Overlapping shapes, like the angle + horizontal stem of "A" are
          rendered in separate MSAA passes and later combined as bitmaps,
          causing a multiplication effect on the alpha channel.
        </li>
        <li>
          Passing explicit degrees to oblique (e.g. <tt>font-style:oblique -5deg</tt>)
          is not supported. (Last confirmed version: Chrome 75)
        </li>
        <li>
          For fonts with negative <tt>slnt</tt> values, as per the OT spec,
          <tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.)
          (Last confirmed version: Chrome 75)
        </li>
        <li>
          Mapping of negative-value <tt>ital</tt> and <tt>slnt</tt> axis
          to <tt>font-style:italic</tt> is not supported.
        </li>
        <li>
          <b>Version &lt;75:</b> Mapping of positive-value <tt>ital</tt> and <tt>slnt</tt> axis
          to <tt>font-style:italic</tt> is not supported.
        </li>
        <li>
          <b>Windows only:</b> kerning is incorrect and
          there are issues with ClearType where for example a lower-case "r"
          (without hints) might be rendered much lower than a lower-case "n".
          (Last confirmed version: Chrome 69)
        </li>
      </ul>
    </li>
    <li>
      <b>Firefox:</b>
      <ul>
        <li>
          For fonts with negative <tt>slnt</tt> values, as per the OT spec,
          <tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.)
          (Last confirmed version: Firefox 68)
        </li>
        <li>
          <b>Version &lt;68:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
          is not supported.
        </li>
      </ul>
    </li>
    <li>
      <b>Edge:</b>
      <ul>
        <li>
          Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt>
          is not supported, nor is Mapping of <tt>slnt</tt> axis to <tt>font-style:oblique</tt>.
          Note: We use separate italic and roman font files for Edge in this
          test, which is why intermediate oblique degrees are displayed as either
          fully slanted or not slanted at all when viewing this in Edge.
          (Last confirmed version: Edge 42)
        </li>
      </ul>
    </li>
  </ul>
</div>
<div class="unsupported">
  <p>This web browser does not support variable fonts</p>
</div>
<div class="samples"></div>
<script type="text/javascript">(function(){

var docstyle = getComputedStyle(document.documentElement)

// family-in-use
document.querySelector('#family-in-use').innerText = docstyle.fontFamily

if (docstyle.fontFamily.indexOf('Inter var') == -1) {
  // variable fonts not unsupported
  return;
}

var samples = document.querySelector('div.samples')

for (let className of ["multi-axis", "single-axis"]) {

  let h2 = document.createElement('h2')
  h2.innerText = className
  samples.appendChild(h2)

  var weight = 100, weightMax = 900, weightStep = 20
  var slant = 0, slantMax = 10, slantStep = 5

  while (weight <= weightMax) {
    slant = 0
    let weightSet = document.createElement('div')
    weightSet.className = 'weightset ' + className

    if (className == "multi-axis") {
      while (slant <= slantMax) {
        let e = document.createElement('div')
        if (weight != 400) {
          e.style.fontWeight = String(weight)
        }
        if (slant != 0) {
          e.style.fontStyle = `oblique ${-slant}deg`
          e.innerText = `I ${weight} oblique ${-slant}`
        } else {
          e.innerText = `I ${weight} normal`
        }
        weightSet.appendChild(e)
        slant += slantStep
      }
    } else {
      e = document.createElement('div')
      if (weight != 400) {
        e.style.fontWeight = String(weight)
      }
      e.innerText = `I ${weight} normal`
      weightSet.appendChild(e)
    }

    e = document.createElement('div')
    if (weight != 400) {
      e.style.fontWeight = String(weight)
    }
    e.style.fontStyle = 'oblique'
    e.innerText = `I ${weight} oblique`
    weightSet.appendChild(e)

    e = document.createElement('div')
    if (weight != 400) {
      e.style.fontWeight = String(weight)
    }
    e.style.fontStyle = 'italic'
    e.innerText = `I ${weight} italic`
    weightSet.appendChild(e)

    e = document.createElement('div')
    if (weight != 400) {
      e.style.fontWeight = String(weight)
    }
    let em = document.createElement('em')
    em.innerText = `I ${weight} <em>`
    e.appendChild(em)
    weightSet.appendChild(e)

    e = document.createElement('div')
    if (weight != 400) {
      e.style.fontWeight = String(weight)
    }
    em = document.createElement('i')
    em.innerText = `I ${weight} <i>`
    e.appendChild(em)
    weightSet.appendChild(e)

    if (className == "multi-axis") {
      e = document.createElement('div')
      if (weight != 400) {
        e.style.fontWeight = String(weight)
      }
      e.style.fontVariationSettings = `'wght' ${weight}, 'slnt' -${slantMax}`
      e.innerText = `I ${weight} slnt -${slantMax}`
      weightSet.appendChild(e)
    }

    samples.appendChild(weightSet)
    weight += weightStep
  }
}


})();</script>
  </body>
</html>