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=Adobe%20Source%20Code%20Pro:wght@400;600;700&display=swap');

body {
  font-family: 'Adobe Source Code Pro', monospace;
}

NPM Package

npm install @fontsource/adobe-source-code-pro

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=Adobe%20Source%20Code%20Pro:wght@400;600;700&display=swap" rel="stylesheet">

Tailwind CSS Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'adobe-source-code-pro': ['Adobe Source Code Pro', monospace],
      },
    },
  },
};

About Adobe Source Code Pro

Adobe Source Code Pro is a free, open-source monospace typeface published by Adobe Type. 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 Adobe Source Code Pro via npm:

npm install @fontsource/adobe-source-code-pro

Or import it via CSS:

@import url('https://fonts.googleapis.com/css2?family=Adobe%20Source%20Code%20Pro: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 Adobe Source Code Pro:

Inter (Sans) — Code Accent + Neutral UI: Balances monospaced syntax with hyper-legible interface text.
Satoshi (Sans) — Fixed-Width + Modernist Sans: Clean modernist geometry for headings and navigation.
Space Grotesk (Display) — Code Body + Tech Display: Future-forward tech aesthetic for developer platforms.

Related Tools

Icon Library — Pair Adobe Source Code Pro with vector icons.
Image Resizer — Pad images for social media covers.
JWT Decoder — Inspect client tokens without data leaks.

Adobe Source Code Pro Font

Adobe Source Code Pro