inter.less

Overview

The inter.less file is a CSS (Less) stylesheet that defines the font-face rules to include the Inter font family and its variations into a web project. It primarily focuses on integrating the Inter family in both its variable font and static font forms, providing a comprehensive range of font weights and styles (normal and italic). The file also includes the InterDisplay sub-family, which is a display-optimized variant of the Inter typeface.

This file enables the use of the Inter font across the application by specifying the font sources (WOFF2 files), the font weights, styles, and related CSS properties, and supports modern browsers with variable font support via a CSS @supports rule.

Detailed Explanation

Purpose

Provide a consistent and performant way to load the Inter font family.
Support variable font technology where available for better typography control.
Offer a fallback to static font files across multiple weights and styles.
Include the InterDisplay variant for display/heading use cases.

Sections and Rules

1. Variable Fonts Usage

/* Variable fonts usage:
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} */

This commented-out section shows recommended usage of variable fonts in CSS.
Use "Inter" as the default font family.
If the browser supports font-variation-settings (variable fonts), switch to "InterVariable" with font-optical-sizing enabled.
This enables smooth weight and style transitions without multiple font file loads.

2. Variable Font `@font-face` Rules

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('@/assets/inter/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('@/assets/inter/InterVariable-Italic.woff2') format('woff2');
}

Defines the variable font files for normal and italic styles.
font-weight range 100 900 indicates support from Thin to Black weights dynamically.
font-display: swap ensures text is displayed immediately with a fallback font and swapped when Inter loads.
Sources are .woff2 files located under @/assets/inter/.

3. Static Fonts `@font-face` Rules

A large set of static font-face declarations exist for both Inter and InterDisplay families.
They cover font weights: 100 (Thin), 200 (ExtraLight), 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold), 900 (Black).
Each weight has normal and italic styles.
Each rule specifies:

@font-face {
  font-family: 'Inter';                /* or 'InterDisplay' */
  font-style: normal | italic;
  font-weight: specific weight (100–900);
  font-display: swap;
  src: url('@/assets/inter/SpecificFont.woff2') format('woff2');
}

These provide robust fallback support for browsers that do not support variable fonts or for use cases requiring static weights.

Usage Examples

Using Variable Fonts (recommended for modern browsers):

:root {
  font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: "InterVariable", sans-serif;
    font-optical-sizing: auto;
  }
}

This CSS snippet ensures that if variable fonts are supported, the variable font version is used, otherwise the static font Inter is used.

Using Specific Static Weights

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400; /* Regular */
}

em {
  font-style: italic;
  font-weight: 400;
}

This will load the specific static font files defined for weight 400 in normal or italic style.

Important Implementation Details

Font Display Strategy: font-display: swap; is used across all font-face declarations to improve perceived performance by showing fallback fonts immediately and swapping to Inter when loaded.
Variable Font Weight Range: Variable fonts are declared with weight ranges (100 900) to cover all font weights dynamically.
File Format: Only WOFF2 format is referenced, optimized for modern browsers and better compression.
Multiple Font Families: Besides the main Inter family, InterDisplay is included, catering to display text with potentially different design characteristics.
Asset Pathing: Font files are referenced with a path alias (@/assets/inter/), which depends on the project’s build system resolving this alias correctly.

Interaction with the System / Application

This file is typically imported or included in the global stylesheet or layout component of the web application.
It provides the font definitions used throughout the UI components that specify font-family: 'Inter' or 'InterVariable'.
The presence of variable font definitions allows components or themes to leverage font-variation CSS properties for fluid typography.
Components designed for headings or display text can explicitly use 'InterDisplay' family for stylistic emphasis.
The file depends on the font assets being properly bundled and served at the specified paths.
The build system (e.g., Webpack, Vite) must be configured to resolve @ aliases and handle .woff2 files as assets.

Mermaid Diagram

The file is a utility font-face definitions file with no classes or functions. The best representation is a flowchart showing the relationships between the main font categories and weights.

flowchart TD
    A[Inter Fonts] --> B[Variable Fonts]
    B --> B1[InterVariable Normal (100-900)]
    B --> B2[InterVariable Italic (100-900)]
    A --> C[Static Fonts]
    C --> C1[Inter Normal 100-900]
    C --> C2[Inter Italic 100-900]
    A --> D[InterDisplay Fonts]
    D --> D1[InterDisplay Normal 100-900]
    D --> D2[InterDisplay Italic 100-900]

    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:1px,stroke-dasharray: 5 5
    style C fill:#bfb,stroke:#333,stroke-width:1px,stroke-dasharray: 5 5
    style D fill:#fbf,stroke:#333,stroke-width:1px,stroke-dasharray: 5 5

Summary

inter.less is a foundational styling file that ensures the Inter font family is properly loaded and usable within the web application. It supports both modern variable font technology and traditional static font files across a full range of weights and styles, including a display variant. Proper inclusion of this file allows seamless typography management and efficient font loading strategies across the system.