Skip to content
DEVPANTRY.COM
Back to the font studio
GITHUBSIL OFL 1.1

Inter

Sans

By Rasmus Andersson • Publisher: Rasmus Andersson

18 styles available•Weights: 100, 200, 300, 400, 500, 600, 700, 800, 900•Variable Font Support
Official PageDownload Files
Live Type Tester
SIZE:36px
WEIGHT:
TRACKING:0px

Styles & Weights Specimen

Weight 100
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 200
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 300
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 500
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 800
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 900
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Quick Integration Snippets

CSS @import
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
  font-family: 'Inter', sans-serif;
}
NPM Package
npm install @fontsource/inter
HTML <link> tag
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
Tailwind CSS v3 Config
// Tailwind CSS v3: tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        "inter": ["Inter","sans-serif"],
      },
    },
  },
};
Tailwind CSS v4 Theme
/* Tailwind CSS v4: add after your font stylesheet imports */
@theme {
  --font-inter: 'Inter', sans-serif;
}

Recommended Typography Pairings

Contrast & Hierarchy

Pairing Inter with high-contrast complementary typefaces creates strong visual hierarchy between headlines, interface body copy, and code blocks.

JetBrains MonoMonospace
UI Body + Code Blocks

Industry standard for developer consoles, docs, and SaaS dashboards.

Explore Pairing
Clash DisplayDisplay
Display Header + Neutral UI

Striking high-contrast editorial titles paired with clean, utilitarian body copy.

Explore Pairing
Fira CodeMonospace
Body + Syntax Highlighting

Programmer-friendly ligatures alongside crisp variable sans.

Explore Pairing
Playfair DisplaySerif
Editorial Headline + Sans Subtext

Classic editorial sophistication balanced by modern digital neutrality.

Explore Pairing

About Inter

Inter is a sans typeface published by Rasmus Andersson. Its listed license is SIL OFL 1.1. It is distributed under the SIL Open Font License. Check the publisher’s license and distribution details before embedding or redistributing files.

Font Weights & Styles

This typeface includes 18 styles. The available weights are: 100, 200, 300, 400, 500, 600, 700, 800, 900.

Installation

Install the available font package for Inter:

npm install @fontsource/inter

Load the supported webfont styles and apply the family:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

Recommended Font Pairings

Try these contrasting families with Inter. Compare them at the sizes used in your interface, especially body text and code:

  • JetBrains Mono (Monospace) — UI Body + Code Blocks: Industry standard for developer consoles, docs, and SaaS dashboards.
  • Clash Display (Display) — Display Header + Neutral UI: Striking high-contrast editorial titles paired with clean, utilitarian body copy.
  • Fira Code (Monospace) — Body + Syntax Highlighting: Programmer-friendly ligatures alongside crisp variable sans.
  • Playfair Display (Serif) — Editorial Headline + Sans Subtext: Classic editorial sophistication balanced by modern digital neutrality.

Related Tools