DEVPANTRY.COM

Inter Font

Back to 2,100+ Open Fonts
GITHUBSIL OFL 1.1

Inter

Serif

By Rasmus Andersson • Publisher: Rasmus Andersson

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

Styles & Weights Specimen

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

Quick Integration Snippets

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

body {
  font-family: 'Inter', sans-serif;
}
NPM Package
npm install @fontsource/inter
HTML <link> tag
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
Tailwind CSS Config
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        '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 free, open-source serif typeface published by Rasmus Andersson. It is distributed under the SIL OFL 1.1 license, making it completely free for commercial and personal use.

Font Weights & Styles

This typeface includes 9 styles. The available weights are: 300, 400, 500, 600, 700, 800.

Installation

You can install Inter via npm:

npm install @fontsource/inter

Or import it via CSS:

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

Recommended Font Pairings

Creating typographic contrast is essential for high-impact web design. Here are battle-tested typeface pairings for Inter:

  • 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