Skip to content
DEVPANTRY.COM
Back to the font studio
FONTSOURCEOFL-1.1

Libre Caslon Condensed

Serif

By Open Source • Publisher: Fontsource Community

8 styles available•Weights: 400, 500, 600, 700
Official Page
Live Type Tester
SIZE:36px
WEIGHT:
TRACKING:0px

Styles & Weights Specimen

Weight 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 500
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Weight 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Quick Integration Snippets

CSS @import
@import url('https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/700.css');

body {
  font-family: 'Libre Caslon Condensed', serif;
}
NPM Package
npm install @fontsource/libre-caslon-condensed
HTML <link> tag
<link href="https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/400.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/500.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/600.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/700.css" rel="stylesheet">
Tailwind CSS v3 Config
// Tailwind CSS v3: tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        "libre-caslon-condensed": ["Libre Caslon Condensed","serif"],
      },
    },
  },
};
Tailwind CSS v4 Theme
/* Tailwind CSS v4: add after your font stylesheet imports */
@theme {
  --font-libre-caslon-condensed: 'Libre Caslon Condensed', serif;
}

Recommended Typography Pairings

Contrast & Hierarchy

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

InterSans
Serif Headline + Modern UI Body

Grounds classic editorial serifs with crisp digital legibility.

Explore Pairing
General SansSans
Serif Titles + Clean Sans Subtext

Warm editorial balance across marketing pages.

Explore Pairing
JetBrains MonoMonospace
Serif Copy + Code Accents

Contrasting literary prose with precision technical monospacing.

Explore Pairing

About Libre Caslon Condensed

Libre Caslon Condensed is a serif typeface published by Fontsource Community. Its listed license is 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 8 styles. The available weights are: 400, 500, 600, 700.

Installation

Install the available font package for Libre Caslon Condensed:

npm install @fontsource/libre-caslon-condensed

Load the supported webfont styles and apply the family:

@import url('https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/libre-caslon-condensed/700.css');

body {
  font-family: 'Libre Caslon Condensed', serif;
}

Recommended Font Pairings

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

  • Inter (Sans) — Serif Headline + Modern UI Body: Grounds classic editorial serifs with crisp digital legibility.
  • General Sans (Sans) — Serif Titles + Clean Sans Subtext: Warm editorial balance across marketing pages.
  • JetBrains Mono (Monospace) — Serif Copy + Code Accents: Contrasting literary prose with precision technical monospacing.

Related Tools