### Package Manager Installation

Source: https://context7.com/rsms/inter/llms.txt

Instructions for installing Inter fonts using popular package managers like NPM, Homebrew (macOS), and apt (Ubuntu/Debian). Includes an example of how to import the CSS file in a JavaScript/TypeScript project.

```bash
# NPM
npm install inter-ui

# Homebrew (macOS)
brew install --cask font-inter

# Ubuntu/Debian
sudo apt install fonts-inter
```

--------------------------------

### HTML Example for Fractions

Source: https://context7.com/rsms/inter/llms.txt

This HTML example displays text with fractions formatted automatically using the 'fractions' class. It shows how sequences like '1/3' and '5/12' are rendered as proper fractions, enhancing readability for measurements and other numerical data.

```html
<!-- Example: Recipe with fractions -->
<p class="fractions">
  Add 1/3 cup flour and 5/12 teaspoon salt.
  Approximately 6/16" thick.
  Mix for 0123/456789 seconds.
</p>
```

--------------------------------

### Install Inter Fonts on Ubuntu Linux

Source: https://github.com/rsms/inter/blob/master/misc/dist/help.txt

This snippet demonstrates how to install Inter font files on Ubuntu Linux by creating a .fonts directory and copying the font files into it. It may require restarting applications or the window server session for changes to take effect.

```bash
mkdir -p ~/.fonts
cp Inter.ttc *.ttf ~/.fonts/
```

--------------------------------

### Start Local Web Server for Font Lab (Python)

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

This command starts a local web server using a Python script, typically used for an interactive font development 'Lab'. It allows for real-time exploration and testing of font files in a web browser.

```bash
./docs/lab/serve.py
```

--------------------------------

### HTML Example for Tabular Numbers

Source: https://context7.com/rsms/inter/llms.txt

This HTML snippet shows a practical example of using a table with the 'data-table' class, which applies tabular numbers for alignment. The 'price-column' class further refines the alignment and formatting for numerical data.

```html
<!-- HTML example -->
<table class="data-table">
  <tr><td>Item A</td><td class="price-column">$1,234.56</td></tr>
  <tr><td>Item B</td><td class="price-column">$45.00</td></tr>
  <tr><td>Item C</td><td class="price-column">$999.99</td></tr>
</table>
```

--------------------------------

### Stylistic Sets Example (Jinja)

Source: https://github.com/rsms/inter/blob/master/docs/index.html

Shows examples of stylistic sets (ssXX) in the Inter font using Jinja. These sets allow for alternative glyph designs for specific characters or punctuation, enhancing stylistic control.

```jinja
Illusion A03 Illusion A03 Disambiguate between similar-looking characters with ss02 or individual character variants
ss02 Disambiguation, or
cv08 Upper-case i with serif
cv05 Lower-case L with tail
zero Slashed zero

It’s “fun” here, Möbius It’s “fun” here, Möbius It’s “fun” here, Möbius Add a little personality to titles
ss03 Round quotes & commas
ss07 Square punctuation
ss08 Square quotes
```

--------------------------------

### HTML Examples for Superscript and Subscript

Source: https://context7.com/rsms/inter/llms.txt

This HTML provides examples of using superscript ('superscript' class) for exponents like '2' in E=mc², and subscript ('subscript' and 'scientific' classes) for chemical formulas like H₂O and SF₆.

```html
<!-- Examples -->
<p>E = mc<span class="superscript">2</span></p>
<p>H<span class="subscript">2</span>O</p>
<p class="scientific">H2O SF6 H2SO4</p>
```

--------------------------------

### HTML Example for Contextual Alternates

Source: https://context7.com/rsms/inter/llms.txt

This HTML snippet demonstrates how contextual alternates automatically adjust punctuation and character spacing within a paragraph styled with the 'contextual' class. It shows examples of adjusted math operators, brackets, arrow ligatures, and symbols.

```html
<!-- Contextual alternates automatically adjust these -->
<p class="contextual">
  3*9  12:34  3–8  +8+x           <!-- Math operators adjust -->
  (SEMI)PER[M]ANE{N}T             <!-- Brackets adjust -->
  -> --> ---> => ==> <->          <!-- Arrow ligatures -->
  S@N  :-)  •Smile                <!-- Symbol adjustments -->
</p>
```

--------------------------------

### Font Installation on macOS

Source: https://context7.com/rsms/inter/llms.txt

Commands to build and install Inter fonts to your system on macOS. Supports variable, static TTF, and static OTF formats, as well as a full installation option. Fonts are installed to ~/Library/Fonts/Inter/.

```bash
# Build and install variable fonts (macOS)
make install_var

# Build and install static TTF fonts (macOS)
make install_ttf

# Build and install static OTF fonts (macOS)
make install_otf

# Full installation (variable + TTF)
make install

# Fonts are installed to ~/Library/Fonts/Inter/
```

--------------------------------

### Compile Specific Font Files (Makefile)

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

These examples demonstrate how to use Make to compile specific font files or groups of files. This is useful for quickly testing changes to individual fonts or styles without recompiling the entire project.

```makefile
make -j build/fonts/static/Inter-Regular.otf \
        build/fonts/static/Inter-MediumItalic.woff2
```

```makefile
make -j static_otf  # all non-variable OTF fonts
```

```makefile
make -j build/fonts/static-hinted/Inter-ExtraLight.woff2
```

--------------------------------

### Use Inter Fonts in Web Content (CDN)

Source: https://github.com/rsms/inter/blob/master/misc/dist/help.txt

This snippet shows how to use the official Inter CDN to include the Inter font family in web content. This method ensures users always receive the latest version of Inter and simplifies the setup process.

```html
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
```

--------------------------------

### HTML: Examples of Stylistic Sets

Source: https://context7.com/rsms/inter/llms.txt

Demonstrates the visual effect of applying various stylistic sets from the Inter font to HTML elements. These examples showcase how different classes, like `.round-punctuation` or `.circled`, alter the appearance of text and symbols. Ensure the corresponding CSS is applied.

```html
<!-- Examples -->
<p class="round-punctuation">It's "fun" here, Möbius</p>
<p class="square-punctuation">Hello, Mästare.!?</p>
<p class="circled">ABC123+→</p>
<p class="squared">ABC123+→</p>
```

--------------------------------

### Local Development Server and Build Process

Source: https://context7.com/rsms/inter/llms.txt

Commands to start a local development server and build variable fonts for testing. This involves editing source files in Glyphs.app, building fonts, and reloading the lab. Includes commands for cleaning, testing, and generating editable UFO files.

```bash
# Terminal 1: Start local development server
./docs/lab/serve.py

# Terminal 2: Build and iterate
# 1. Edit source files in Glyphs.app
# 2. Build variable fonts for testing
make var_web

# 3. Reload lab at http://localhost:3003/?varfont=1
# 4. Repeat

# Before submitting changes
make clean && make -j all
make -j test

# Generate editable UFO files
make -j editable-ufos
# Editable files will be in build/ufo-editable/
```

--------------------------------

### Profile Python Scripts with cProfile

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

This example illustrates how to profile arbitrary Python scripts using the cProfile module. The -o option saves the profiling data to a file, and the -s option sorts the output by a specified key, such as time.

```python
python -m cProfile -o 1.pstats -s time script.py
```

--------------------------------

### Verify Font Installation on Linux

Source: https://github.com/rsms/inter/blob/master/docs/download/index.html

This command lists all available fonts on a Linux system and filters the output to show only those containing 'Inter' in their name, verifying if the Inter font has been successfully installed.

```bash
fc-list | grep "Inter"
```

--------------------------------

### Character Variants Example (Jinja)

Source: https://github.com/rsms/inter/blob/master/docs/index.html

Demonstrates character variants in the Inter font using Jinja templating. It shows different stylistic alternatives for characters and digits, controlled by feature tags like 'cvXX'.

```jinja
cvXX Character variants 1234567890 1234567890 Alternative digits
cv01 Alternate one
cv09 Flat-top three
cv02 Open four
cv03 Open six
cv04 Open nine
zero Slashed zero

Guillable ürá Guillable ürá Character variants is a mood
cv10 Capital G with spur
cv06 Simplified u
cv11 Single-story a

Efficient after Efficient after Give it a compact character
cv12 Compact f
cv13 Compact t
```

--------------------------------

### HTML: Examples of Case-Sensitive Forms

Source: https://context7.com/rsms/inter/llms.txt

Illustrates the use of case-sensitive forms in the Inter font for headlines and text. The examples show how classes like `.all-caps-headline` and `.uppercase-text` modify punctuation and spacing for better visual coherence with uppercase content. Ensure the corresponding CSS is applied.

```html
<!-- Example: Headlines with case-sensitive forms -->
<h1 class="all-caps-headline">(HELLO) [WORLD] {9000}</h1>
<p class="uppercase-text">A@B  3 + 9 ≈ 12 * 1 → X</p>
```

--------------------------------

### JavaScript for Dynamic Instruction Display

Source: https://github.com/rsms/inter/blob/master/docs/download/index.html

This JavaScript code dynamically displays installation instructions based on the user's operating system. It manages the active state of instruction sections and updates them via a select menu.

```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');
  }
})();
```

--------------------------------

### JavaScript/TypeScript CSS Import

Source: https://context7.com/rsms/inter/llms.txt

Example of how to import Inter font CSS files into a JavaScript or TypeScript project after installation via a package manager like NPM.

```javascript
// JavaScript/TypeScript import
import 'inter-ui/inter.css';

// Or import specific weights
import 'inter-ui/inter-variable.css';
```

--------------------------------

### Tabular Figures Example (Jinja)

Source: https://github.com/rsms/inter/blob/master/docs/index.html

Illustrates the use of tabular figures in the Inter font via Jinja templating. This feature ensures that numeric characters have uniform width, which is beneficial for tables and financial data.

```jinja
010.2*364+8(2).5
−51,67×8÷91{0}:1 010.2*364−8(2).5
+51,67×8÷91{0}:1 123.4567890[1],3 Tabular figures are excellent for tables of numeric data. `tnum` enables an entire set of dedicated glyphs that have the same width across all weights. tnum Tabular figures
```

--------------------------------

### HTML: Example of Discretionary Ligatures

Source: https://context7.com/rsms/inter/llms.txt

Shows text styled with discretionary ligatures enabled using the Inter font. The example demonstrates how sequences of characters like 'fi', 'ff', 'fl', etc., can be replaced by single, more aesthetically pleasing glyphs. Ensure the corresponding CSS is applied.

```html
<!-- Example: Text with discretionary ligatures -->
<p class="fancy-ligatures">
  Difficult affine fjord
  after affine art interface
  ff ffi fft ft fi tt tf df dt
  ¡¿What?! 
</p>
```

--------------------------------

### Bash: Build All Inter Font Files from Source

Source: https://context7.com/rsms/inter/llms.txt

Builds all approximately 80 font files for the Inter typeface from its source code using the `make` utility. This command requires cloning the repository and having the necessary build tools installed. It performs a comprehensive build of all font formats.

```bash
# Clone the repository
git clone https://github.com/rsms/inter.git
cd inter

# Build all font files (~80 fonts)
make -j all

# Run QA tests
make test
```

--------------------------------

### Use Inter Fonts in Web Content (Self-Hosted)

Source: https://github.com/rsms/inter/blob/master/misc/dist/help.txt

Instructions for self-hosting Inter web fonts and CSS. This involves copying font files and the CSS to a web server, and then linking them in the HTML head. It also includes CSS rules for applying the font family, with a fallback for variable font support.

```html
<link rel="preconnect" href="https://your-domain/">
<link rel="stylesheet" href="https://your-domain/inter.css">
```

```css
:root {
  font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: normal) {
  :root {
    font-family: 'Inter var', sans-serif;
  }
}
```

--------------------------------

### HTML Example for Character Disambiguation

Source: https://context7.com/rsms/inter/llms.txt

This HTML showcases the application of character disambiguation using the 'product-code' and 'disambiguated' classes. It highlights how these styles improve the clarity of product codes and similar character sets by increasing visual differences.

```html
<!-- Example: Product codes and identifiers -->
<span class="product-code">IL10O0WP0ACO9</span>
<span class="disambiguated">Illegal business βeta</span>
```

--------------------------------

### Get Help for fontinfo Tool

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

This command shows how to display the help message for the fontinfo tool, which is part of the miscellaneous tools in the misc/tools directory. The help flag (-h) provides information on the tool's usage and available options for generating font metadata.

```shell
misc/tools/fontinfo.py -h
```

--------------------------------

### Inter Font Feature Samples (Jinja)

Source: https://github.com/rsms/inter/blob/master/docs/index.html

This Jinja template iterates through font feature samples, displaying tags, titles, descriptions, and code examples for each feature. It's used to generate dynamic content for showcasing font variations.

```jinja
{% for f in site.data.feature_samples %}
  {{f.tag}}
  {{f.title}}
  {% if f.description %}
    {{f.description}}
  {% endif %}
  {% for sample in f.samples %}{% assign sample_in = sample | replace: "›", "_" | replace: "‹", "_" -%}
    {{sample_in}}
  {% endfor %}
  {% for sample in f.samples %}{% assign sample_out = sample | remove: "›" | remove: "‹" %}{% assign sample_out = sample_out | remove: " " -%}
    {{sample_out}}
  {% endfor %}
{% endfor %}
```

--------------------------------

### Variable Management with Query String Parsing

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

Manages URL query string parameters, allowing for getting, setting, and storing variable values. It parses the initial query string and provides methods to interact with and update these variables, reflecting changes back into the query string.

```javascript
class Vars {
  constructor(queryString) {
    this.values = parseQueryString(queryString);
    this.vars = new Map();
  }

  getValue(name) {
    return this.values.get(name);
  }

  setValue(name, value) {
    let v = this.vars.get(name);
    if (!v) {
      return null;
    }
    v.setValue(value);
    this._storeValue(name, value);
    return value;
  }

  _storeValue(name, value) {
    if (value === null || value === undefined) {
      this.values.delete(name);
    } else {
      this.values.set(name, value);
    }
    setCurrentQueryString(() => this.getQueryString());
  }

  refreshValue(name) {
    let v = this.vars.get(name);
    return v === undefined || v === null ? null : this._refreshValue(v);
  }

  _refreshValue(v, ev) {
    let value = v.refreshValue(ev);
    this._storeValue(v.name, value);
    return value;
  }

  getQueryString() {
    let qs = parseQueryString(document.location.search);
    for (let e of this.vars) {
      let k = e[0], vr = e[1], v = this.values.get(k);
      if (v === undefined || vr.defaultValue == v || k[0] == '_') {
        qs.delete(k);
      } else {
        qs.set(k, v);
      }
    }
    return fmtQueryString(qs);
  }

  bind(name, sel, valueSetter, valueGetter) {
    if (typeof sel == 'function' || sel === undefined) {
      valueGetter = valueSetter;
      valueSetter = sel;
      sel = '[name="' + name + '"]';
    }
    let e = typeof sel == 'string' ? document.querySelector(sel) : sel;
    let v = new BoundVar(name, e, valueGetter, valueSetter, this);
    this.vars.set(name, v);

    if (v.isNumber) {
      e.addEventListener('keydown', ev => {
        if (!ev.shiftKey) {
          return;
        }
        switch (ev.key) {
          case 'ArrowRight':
          case 'ArrowUp': {
            if (ev.key == 'ArrowRight' && e.type != "range") { return; }
            if (ev.altKey) { ev.target.valueAsNumber *= 2; } else { ev.target.valueAsNumber += 10; }
            ev.preventDefault();
            ev.stopPropagation();
            this._refreshValue(v, ev);
            break;
          }
          case 'ArrowLeft':
          case 'ArrowDown': {
            if (ev.key == 'ArrowLeft' && e.type != "range") { return; }
            if (ev.altKey) { ev.target.valueAsNumber /= 2; } else { ev.target.valueAsNumber -= 10; }
            ev.preventDefault();
            ev.stopPropagation();
            this._refreshValue(v, ev);
            break;
          }
        }
      }, { capture: true, passive: false });
    }

    let onChange = ev => this._refreshValue(v, ev);
    e.addEventListener('input', onChange);
    if (v.isCheckbox) {
      e.addEventListener('change', onChange);
    }

    let existingValue = this.values.get(name);
    if (existingValue !== null && existingValue !== undefined) {
      if (v.isNumber) {
        existingValue = parseFloat(existingValue);
      } else if (v.isCheckbox) {
        existingValue = existingValue != '0' && existingValue != 'false' && existingValue != 'off';
      }
      v.setValue(existingValue);
    } else {
      onChange(null);
    }
    return v;
  }
}
```

--------------------------------

### Initialize UI Elements and Event Listeners (JavaScript)

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

Initializes various UI elements by selecting them using CSS selectors and sets up global event listeners for keydown and keyup events to track user input. It also initializes sidebar state based on URL parameters.

```javascript
const secondaryFontElements = $$('.secondaryFont')
const primaryFontElements = $$('.primaryFont')
const repertoireControl = $('.repertoireControl')
const samplesElement = $('samples')
const boxes = $('boxes')
let keyPressed = ""
let shiftKeyPressed = false

const checkKeys = ev => {
  keyPressed = ev.key
  shiftKeyPressed = ev.shiftKey
}

window.addEventListener('keydown', checkKeys)
window.addEventListener('keyup', checkKeys)

// sidebar show/hide
const sidebarButton = $("#sidebar-button")
let sidebarMinimized = false

function setSidebarMinimized(minimized) {
  sidebarMinimized = minimized
  document.body.classList.toggle("sidebar-minimized", sidebarMinimized)
  setCurrentQueryStringParam("nosidebar", sidebarMinimized ? 1 : undefined)
  sidebarButton.title = sidebarMinimized ? "Show controls" : "Hide controls"
}

sidebarButton.onclick = () => setSidebarMinimized(!sidebarMinimized)
setSidebarMinimized(document.location.search.indexOf('nosidebar') != -1)

// setInterval(()=>{
//  setSidebarMinimized(!sidebarMinimized)
// },2000)

```

--------------------------------

### JavaScript Bound Variable Class for UI Elements

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

A `BoundVar` class designed to manage the state of UI elements (like input fields) and synchronize them with application variables. It handles different input types (checkbox, number, text) and provides mechanisms for getting and setting values, including initial setup and change callbacks. This simplifies two-way data binding in JavaScript applications.

```javascript
class BoundVar {
    constructor(name, e, valueGetter, valueSetter, parentVars) {
        this.name = name
        this.e = e
        this.valueGetter = valueGetter
        this.valueSetter = valueSetter
        this.isCheckbox = e.type == 'checkbox'
        this.isNumber = e.type == 'number' || e.type == 'range'
        this.lastValue = this.getValue()
        this.parentVars = parentVars
        this.defaultValue = this.lastValue
        this._changeCallbacks = []
        this._isInitialSetValue = true
    }

    refreshValue(ev) {
        let value = this.getValue(ev)
        this.setValue(value)
        return value
    }

    getValue(ev) {
        return this.valueGetter ? this.valueGetter(this.e, this.lastValue, ev) : this.isCheckbox ? this.e.checked : this.isNumber ? this.e.valueAsNumber : this.e.value
    }

    onChange(callback) {
        this._changeCallbacks.push(callback)
    }

    removeChangeListener(callback) {
        let i = 0
        for (; i < this._changeCallbacks.length; i++) {
            if (this._changeCallbacks[i] === callback) {
                this._changeCallbacks.splice(i, 1)
                return true
            }
        }
        return false
    }

    setValue(value) {
        if (this.isCheckbox && typeof value != 'boolean') {
            value = parseInt(value)
            if (isNaN(value)) {
                value = 0
            }
        }
        if (this.valueSetter) {
            let isInitial = this._isInitialSetValue
            this._isInitialSetValue = false
            const v = this.valueSetter(this.e, value, isInitial)
            if (v !== undefined) {
                value = v
            }
        }
        if (this.isCheckbox) {
            if ((this.e.checked = !!value)) {
                this.e.setAttribute("checked", "")
            } else {
                this.e.removeAttribute("checked")
            }
        } else if (this.isNumber && typeof value == 'number' && 'valueAsNumber' in this.e) {
            if 
```

--------------------------------

### Main Function Initialization for Inter UI

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

Initializes the main application logic, creating a Vars instance to manage URL query parameters and binding them to UI elements. It also performs an initial UI update by copying text content between elements.

```javascript
function main() {
  const vars = new Vars(document.location.search);
  const $ = (q, el) => (el || document).querySelector(q);
  const $$ = (q, el) => [].slice.call((el || document).querySelectorAll(q));

  let interUISample = $('sample.inter');
  let secondarySample = $('sample.secondary');
  secondarySample.innerText = interUISample.innerText;

  const measureDiv = $('#measure');
  const sec
```

--------------------------------

### Populate Sample Text Select Options (JavaScript)

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

Populates a select dropdown element with options based on a 'samples' Map. Each key in the map becomes an option's text, and if the value is truthy, the option is enabled; otherwise, it's disabled. This is used for selecting sample text for display.

```javascript
// sample text
const samplesSelect = $('select[name="sample"]')
for (let [k,v] of samples) {
  const opt = document.createElement('option')
  opt.innerText = k
  if (v) {
    opt.value = k
  } else {
    opt.disabled = true
  }
  samplesSelect.appendChild(opt)
}
```

--------------------------------

### Profile fontbuild Execution and Print Statistics

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

This section demonstrates how to profile the execution of the fontbuild tool by generating a pstat file and then printing its contents. The --profile option is used with fontbuild to create the profile data, and fmtprofile.py is used to format and display this data.

```shell
misc/fontbuild --profile=build/tmp/1.pstat compile -o build/tmp/f.otf build/ufo/Inter-Regular.ufo
```

```shell
misc/tools/fmtprofile.py -n 20 build/tmp/1.pstat
```

--------------------------------

### Ubuntu Linux Font Cache Update

Source: https://github.com/rsms/inter/blob/master/docs/download/index.html

This command is used on Ubuntu Linux to rebuild the font cache. It's a common troubleshooting step when newly installed fonts do not appear in applications.

```bash
sudo fc-cache -f -v
```

--------------------------------

### Bash: Build All Web Inter Fonts

Source: https://context7.com/rsms/inter/llms.txt

Compiles all necessary font formats (e.g., WOFF, WOFF2) optimized for web usage from the Inter font source. This command ensures that the Inter font can be efficiently served and displayed across different web browsers. Requires the `make` utility.

```bash
# Build all web fonts
make -j web
```

--------------------------------

### HTML Example for Slashed Zero

Source: https://context7.com/rsms/inter/llms.txt

This HTML demonstrates the use of the 'code-block' class to display code with a slashed zero, improving readability for identifiers containing both zeros and the letter O. The 'InterVariable' font is specified in the associated CSS.

```html
<!-- Example: Code display with slashed zero -->
<pre class="code-block">
const API_KEY = "A0B1C2D30E4F5";
const PORT = 8080;
const IP = "192.168.0.1";
</pre>
```

--------------------------------

### Run QA Tests (Makefile)

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

This command executes the Quality Assurance tests for the Inter font project. It utilizes the Make tool and requires Python 3. The tests help ensure the integrity and correctness of the font files.

```makefile
make test
```

--------------------------------

### Bash: Build All Static Inter Font Formats

Source: https://context7.com/rsms/inter/llms.txt

Builds all static OpenType (OTF) and TrueType (TTF) font files for the Inter typeface. The TTF build includes hinting for better rendering on various screens. These commands use `make` to automate the compilation process for all static variants.

```bash
# Build all static OTF fonts
make -j static_otf

# Build all static TTF fonts (hinted)
make -j static_ttf
```

--------------------------------

### Build Web Font Assets

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

These commands are used to build the web font assets for the Inter font project. `make -j web` builds all styles, while `make var_web` specifically builds the variable font, allowing for quicker iteration when working with the interactive lab.

```bash
make -j web
make var_web
```

--------------------------------

### Enable Automatic Fraction Formatting (CSS)

Source: https://context7.com/rsms/inter/llms.txt

This CSS code enables the automatic conversion of number sequences with slashes into proper fractions using the 'frac' OpenType feature. It's useful for recipes, measurements, or any text where fractions are common. The example also shows combining 'frac' with ligatures ('liga').

```css
/* Enable automatic fraction formatting */
.fractions {
  font-family: InterVariable, sans-serif;
  font-feature-settings: 'frac' 1;
}

/* Combine with other numeric features */
.recipe-measurements {
  font-family: InterVariable, sans-serif;
  font-feature-settings: 'frac' 1, 'liga' 1;
}
```

--------------------------------

### Toggle CSS Class for Sample Background

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

This function binds a variable to toggle the 'draw-sample-background' CSS class on the document's root element, controlling the display of a sample background.

```javascript
vars.bind("draw-sample-bg", (e, on) => {
  document.documentElement.classList.toggle('draw-sample-background', on)
})
```

--------------------------------

### Typography Styling for Inter Font

Source: https://github.com/rsms/inter/blob/master/docs/index.html

This CSS code defines various typographic styles for the Inter font, including large titles, example text, and feature descriptions. It utilizes viewport units and CSS variables for responsive sizing and theming. Specific classes target different text presentations like italic, single-line, multi-line, and feature-specific text.

```css
body { overflow-x: hidden }
h1.title { font-size: 6rem; letter-spacing: -0.03em; margin-bottom: 0.4em; margin-top: 4rem; font-size: calc(100vw / 8); line-height: 1.0; }
.row.examples .spacer { height: 3rem; }
.row.section1-roman {}
@media (prefers-color-scheme: light) { /*.row.section1-italic { background: var(--foreground-color); color: var(--background-color); }*/ }
@media (prefers-color-scheme: dark) { /*.row.section1-italic { background: #555; }*/ }
.row.examples .label { font-size: var(--font-size); opacity: 0.3; }
.row.examples a.label:hover { opacity: 1; }
.row.examples .label.r { text-align: right }
@media only screen and (max-width: 719px) { /* window width <= 719 */ .row.examples .example-note { margin: 1em 0 } }
.example2 { font-size: 10vw; line-height: initial; margin-left: calc(1em / -18); letter-spacing: -0.02em; }
.example2.i { font-style:italic; }
.example2.single-line { line-height: 1.0; white-space: nowrap; }
.example2.multi-line { font-size: 6vw; padding-top: 0.5rem; padding-bottom: 2rem; line-height: 1.1; }
.example2.features { line-height: 1.2; white-space: nowrap; font-size: 16vw; }
.example-a-z { font-size: 9.5vw; white-space: nowrap; font-weight: 450; line-height: 1.0; display: flex; flex-direction: column; /* ☰ */ gap: 1rem; /* label to text */ padding: 0 0; margin: 0; width: 100%; }
.row.features-section1 { padding-bottom:1.5rem; }
.row.features-section1 hr:last-child { display: none; }
.row.features-section2 { padding-top:3vw; }
.row.features-section1 { /* light pink: --background-color: #ffb6c1; --em-color: #815159; */ --background-color: var(--warm-yellow); --foreground-color: #000011; --em-color: color(display-p3 0.5 0.4 0); --unit-background-color: rgba(0, 0, 0, 0.08); color: var(--foreground-color); background: var(--background-color); }
@supports not (color: color(display-p3 1 1 1)) { .row.features-section1 { --em-color: #a07400; } }
.feat-example em { color: var(--em-color); }
.feat-name p { margin-bottom:0 }
.feat-example { font-size: 2.5vw; }
.feat-example em { font-style: normal; }
```

--------------------------------

### Run QA Tests (Makefile)

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

This command runs the Quality Assurance tests for the Inter font project using Make. It's part of the pre-submission workflow to verify the integrity of the font files.

```makefile
make -j test
```

--------------------------------

### OpenType Stylistic Alternates (cv01-cv09)

Source: https://github.com/rsms/inter/blob/master/docs/index.html

These features provide stylistic variations for specific characters. For example, cv01 offers an alternate 'one', cv02 and cv03 offer different 'four' and 'six' glyphs, cv05 provides a 'lowercase L with tail', cv06 a 'simplified u', cv07 an 'alternate German double s', cv08 an 'upper-case i with serif', and cv09 a 'flat-top three'.

```opentype
feature cv01 {
  sub a by a.cv01;
}

feature cv02 {
  sub four by four.cv02;
}

feature cv03 {
  sub six by six.cv03;
}

feature cv05 {
  sub l by l.cv05;
}

feature cv06 {
  sub u by u.cv06;
}

feature cv07 {
  sub s by s.cv07;
}

feature cv08 {
  sub I by I.cv08;
}

feature cv09 {
  sub three by three.cv09;
}
```

--------------------------------

### Secondary Sample Display Management in JavaScript

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

Manages the display and styling of a secondary sample element, allowing it to be shown or hidden and updated with specific CSS classes. It's used for comparing different font styles or states.

```javascript
let secondarySampleClassNameAddition = null
let currentSecondarySampleClassName = null

function updateSecondarySample() {
  setSecondarySampleClassName(currentSecondarySampleClassName)
}

const setSecondarySampleClassName = className => {
  currentSecondarySampleClassName = className
  if (secondarySampleClassNameAddition) {
    secondarySample.style.fontFamily = null
    secondarySample.classList.remove(secondarySampleClassNameAddition)
    secondaryFontElements.forEach(e => e.classList.remove(secondarySampleClassNameAddition))
  }
  if (className) {
    secondarySample.classList.add(className)
    secondaryFontElements.forEach(e => e.classList.add(className))
  }
  secondarySampleClassNameAddition = className || null
}

const enableSecondarySample = className => {
  setSecondarySampleClassName(className)
  secondarySample.style.display = null
  document.body.classList.remove('secondarySampleDisabled')
}

const disableSecondarySample = className => {
  setSecondarySampleClassName(null)
  secondarySample.style.display = 'none'
  document.body.classList.add('secondarySampleDisabled')
}
```

--------------------------------

### Compile All Font Files (Makefile)

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

This command compiles all font files for the Inter project using the Make tool. It requires Python 3 to be preinstalled and has been tested on macOS and Linux. The output is placed in the 'build' directory.

```makefile
make -j all
```

--------------------------------

### Web Usage: HTML and CSS for Inter Font

Source: https://github.com/rsms/inter/blob/master/docs/index.html

This snippet demonstrates how to integrate the Inter typeface into a web project using HTML and CSS. It includes preconnecting to the CDN and setting the font family and OpenType features in CSS. The CSS also includes a fallback for variable font support.

```html
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
```

```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;
  }
}
```

--------------------------------

### Profile Font Build Performance

Source: https://context7.com/rsms/inter/llms.txt

Commands to profile font build performance for optimization. This includes profiling fontbuild execution, printing profile results, interactive profile inspection using pstats, and a general command to profile any Python script.

```bash
# Profile fontbuild execution
misc/fontbuild --profile=build/tmp/1.pstat compile \
  -o build/tmp/f.otf build/ufo/Inter-Regular.ufo

# Print profile results (top 20)
python misc/tools/fmtprofile.py -n 20 build/tmp/1.pstat

# Interactive profile inspection
python3 -m pstats build/tmp/1.pstat

# Profile any Python script
python -m cProfile -o 1.pstats -s time script.py
```

--------------------------------

### Assign Project Variables (Liquid)

Source: https://github.com/rsms/inter/blob/master/docs/_includes/defs.html

Assigns various project-related variables using Liquid templating language. This includes build version, description, release version, and URL root. It also iterates through static files to capture modification times for CSS and favicon.

```liquid
{% assign build_version = site.time | date: "%Y%m%d%H%M%S" %}{% assign description = "Inter is a typeface family" %}{% assign release_version = site.data.fontinfo[0].version %}{% capture title %}{% if page.title %}{{ page.title }} — Inter{% else %}Inter font family{% endif %}{% endcapture %}{% if site.baseurl %}{% assign url_root = site.baseurl | append: "/" %}{% else %}{% assign url_root = "/inter/" %}{% endif %}{% for file in site.static_files %}{% assign _path = file.path | remove_first: "/inter" %}{% if _path == "/res/base.css" %}{% assign base_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% elsif _path == "/res/favicon.png" %}{% assign favicon_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% endif %}{% endfor %}{% capture download_url %}https://github.com/rsms/inter/releases/download/v{{release_version}}/Inter-{{release_version}}.zip{% endcapture -%}
```

--------------------------------

### Basic Inter Usage with Variable Font Support (CSS)

Source: https://context7.com/rsms/inter/llms.txt

This CSS snippet demonstrates basic usage of the Inter font family, including enabling ligatures and contextual alternates. It also includes a fallback for browsers that do not support variable fonts.

```css
:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}

/* Use variable font when supported */
@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}
```

--------------------------------

### Comparison Mode Binding in JavaScript

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

Binds a 'compare' variable to control the secondary sample display. It enables or disables the secondary sample based on the selected comparison mode ('system' or others), applying appropriate classes.

```javascript
vars.bind('compare', (e, v) => {
  disableSecondarySample()
  switch (v) {
    case 'system':
      enableSecondarySample('systemFont');
      break;
    //case 'inter-other':
      //enableSecondarySample('inter-other-font');
      //break;
    default:
      return '-';
  }
}, e => (e.value && e.value != '-') ? e.value : null)
```

--------------------------------

### Generate Kerning Samples

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

This Python script generates sample text strings for evaluating kerning adjustments. It takes a UFO font file path and a left-hand side glyph name as input, outputting combinations with various right-hand side characters. This is useful for fine-tuning kerning pairs.

```python
misc/tools/kernsample.py src/Inter-Black.ufo P -suffix MOR
```

--------------------------------

### Bash: Clean and Reset Inter Build Environment

Source: https://context7.com/rsms/inter/llms.txt

Provides commands to clean build artifacts and reset the build environment for the Inter font project. `make clean` removes generated files, while `make reset` additionally removes the virtual environment, ensuring a fresh state for subsequent builds.

```bash
# Clean build artifacts
make clean

# Reset environment (clean + remove venv)
make reset
```

--------------------------------

### Add Glyphs for Superscript

Source: https://github.com/rsms/inter/blob/master/misc/gen-sups-rmx-scaler-values.txt

This step involves adding glyphs for superscript characters if they do not already exist. It lists common characters and their corresponding '.sups' variants.

```plaintext
a=a.sups
b=b.sups
c=c.sups
d=d.sups
e=e.sups
f=f.sups
g=g.sups
h=h.sups
i=i.sups
j=j.sups
k=k.sups
l=l.sups
m=m.sups
n=n.sups
o=o.sups
p=p.sups
q=q.sups
r=r.sups
s=s.sups
t=t.sups
u=u.sups
v=v.sups
w=w.sups
x=x.sups
y=y.sups
z=z.sups
zero=zero.sups
one=one.sups
two=two.sups
three=three.sups
four=four.sups
five=five.sups
six=six.sups
seven=seven.sups
eight=eight.sups
nine=nine.sups
parenleft=parenleft.sups
parenright=parenright.sups
plus=plus.sups
minus=minus.sups
equal=equal.sups
```

--------------------------------

### Variable Font Input Bindings in JavaScript

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

Binds input elements for variable font weight ('_wght') and optical size ('_opsz') to update the respective settings. It ensures that updates only occur when the corresponding range controls are not actively being modified.

```javascript
let varWeightNum = vars.bind('_wght', '[name="varWeightNum"]', (e, v) => {
  if (varWeightRange && !varWeightSettingValueImpl)
    vars.setValue("wght", v)
})
let varOpszNum = vars.bind('_opsz', '[name="varOpszNum"]', (e, v) => {
  if (varOpszRange && !varOpszSettingValueImpl)
    vars.setValue("opsz", v)
})
```

--------------------------------

### RMX Scaler Settings for +, - , = Glyphs

Source: https://github.com/rsms/inter/blob/master/misc/gen-sups-rmx-scaler-values.txt

Configuration for RMX Scaler to transform '+', '-', and '=' glyphs. It specifies scaling parameters for width, weight, height, and vertical shift.

```json
{
  "width" : [
    66.6,
    66.6,
    66.6,
    66.6,
    66.6,
    66.6
  ],
  "weight" : [
    0,
    0,
    -50,
    -50,
    -300,
    -300
  ],
  "height" : [
    63,
    63,
    63,
    63,
    63,
    63
  ],
  "verticalShift" : [
    1024,
    1024,
    1024,
    1024,
    1024,
    1024
  ]
}
```

--------------------------------

### RMX Scaler Settings for a-z, (, ) Glyphs

Source: https://github.com/rsms/inter/blob/master/misc/gen-sups-rmx-scaler-values.txt

Configuration for RMX Scaler to transform 'a-z', '(', and ')' glyphs. It specifies scaling parameters for width, weight, height, and vertical shift.

```json
{
  "width" : [
    66.6,
    66.6,
    66.6,
    66.6,
    66.6,
    66.6
  ],
  "weight" : [
    0,
    0,
    -50,
    -50,
    -300,
    -300
  ],
  "height" : [
    66.6,
    66.6,
    66.6,
    66.6,
    66.6,
    66.6
  ],
  "verticalShift" : [
    1024,
    1024,
    1024,
    1024,
    1024,
    1024
  ]
}
```

--------------------------------

### Control Feature Flags with CSS Properties

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

This code iterates through elements with the class 'featopt' to bind feature options. It extracts the feature name and values from the element's name attribute and uses `setFeature` to apply the corresponding CSS properties.

```javascript
for (let e of $$('input.featopt')) {
  let p = e.name.replace(/^feat\:/, '').split('=')
  let name = p[0]
  let valueOn = parseInt(p[1] || '1')
  let valueOff = valueOn == 0 ? 1 : 0
  let vr = vars.bind('feat-' + name, e, (e, on) => {
    setFeature(name, on ? valueOn : valueOff, /\*dontUpdateVar=\*\/true)
  })
  featVars.set(name, vr)
}
updateFeaturesStyle()
```

--------------------------------

### Responsive Column Layout (CSS)

Source: https://github.com/rsms/inter/blob/master/docs/index.html

Applies multi-column layout properties for smaller screens, defining column width, count, gap, and fill behavior. It also includes rules for breaking content within columns and ensuring headings do not break across columns.

```CSS
/* small screens only */
.columns {
  column-width: 22em;
  column-count: 4;
  column-gap: 3em;
  column-fill: balance;
}
.columns > p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.columns > h1, .columns > h2, .columns > h3, .columns > h4, .columns > h5, .columns > h6 {
  break-after: avoid;
}
```

--------------------------------

### Clean and Compile All Fonts (Makefile)

Source: https://github.com/rsms/inter/blob/master/CONTRIBUTING.md

This sequence first cleans the build directory and then recompiles all font files. This is a recommended step before submitting changes to ensure a clean build and thorough inspection of all generated files.

```makefile
make clean && make -j all
```

--------------------------------

### Update Sample Text and UI Elements

Source: https://github.com/rsms/inter/blob/master/docs/lab/index.html

This function binds a variable to a select element to change the sample text displayed in the UI. It handles different sample types, including HTML content and text with directives like 'enableFeatures' and 'notrim'. It also manages the visibility of a repertoire control and triggers a refresh of the size variable when the 'Repertoire' sample is selected.

```javascript
sampleVar = vars.bind('sample', samplesSelect, (e, v) => {
  let sampleText = samples.get(v) || ''+v
  if (v == 'Repertoire') {
    repertoireControl.style.display = null
  } else {
    repertoireControl.style.display = 'none'
  }
  if (typeof sampleText == 'object' && sampleText.toHTML) {
    const html = sampleText.toHTML()
    interUISample.innerHTML = html
    secondarySample.innerHTML = html
  } else {
    // look for directive
    // #!directive:value
    // #!directive
    sampleText = String(sampleText).replace(/^[\s\r\n\r]+|[\s\r\n\r]+$/g, '')
    let m = /(?:^|\n)#\!([\w_\-]+)(?::(.+)|)(?:\n|$)/.exec(sampleText)
    if (m) {
      // parse directive
      sampleText = ( 
        sampleText.substring(0, m.index) + sampleText.substr(m.index + m[0].length) 
      )
      let directive = m[1].toLowerCase()
      // console.log('dir', m[1], '=>', m[2])
      if (directive == 'enablefeatures') { // #!enableFeatures:tnum,dlig
        for (let feat of m[2].toLowerCase().split(/\s\*,\s*/)) {
          setFeature(feat, 1)
        }
      } else if (directive == 'notrim') { // #!notrim
        // noop
      } else {
        console.warn(`ignoring unknown directive ${m[0]} in sample text`)
      }
    }
    if (sampleText) {
      interUISample.innerText = sampleText
      secondarySample.innerText = sampleText
    }
  }
  if (v == 'Repertoire') {
    requestAnimationFrame(() => {
      if (sizeVar) {
        sizeVar.refreshValue(null)
      }
    })
  }
})
```

--------------------------------

### Create Font Directory on Linux

Source: https://github.com/rsms/inter/blob/master/docs/download/index.html

This command creates a hidden directory named '.fonts' in the user's home directory if it doesn't already exist. This is a standard location for user-installed fonts on many Linux distributions.

```bash
mkdir -p ~/.fonts
```