for

mfs-tailwind

The "Modern Font Stacks" as `theme:{fontFamily}` directives for TailwindCSS config.

The stacks originate from the Modern Font Stacks, a passion project of Dan Klammer. See the repository of the project to preview the stacks.

Wordpress users See LittleBigThing for a Wordpress plugin.

---

Installation

TailwindCSS ^4.0

As of TailwindCS 4.0, the tailwind.config.js file is no longer needed ( though it will still work that way too ). Simply add any of these we need to your base CSS file.

@theme {
  --font-systemui:     system-ui, sans-serif;
  --font-transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-oldstyle:     'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  --font-humanist:     Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --font-geohumanist:  Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-classhuman:   Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  --font-neogrote:     Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  --font-monoslab:     'Nimbus Mono PS', 'Courier New', monospace;
  --font-monocode:     ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-industrial:   Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  --font-roundsans:    ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  --font-slabserif:    Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
  --font-antique:      Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
  --font-didone:       Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
  --font-handwritten:  'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
}

TailwindCSS ^3.0

Add any or all of the following to the theme section of your tailwind.config.js file:

module.exports = {
  corePlugins: {},
  content: [],
  theme: {
    fontFamily: { // https://github.com/system-fonts/modern-font-stacks
      systemui:     ['system-ui', 'sans-serif'],
      transitional: ['Charter', 'Bitstream Charter', 'Sitka Text', 'Cambria', 'serif'],
      oldstyle:     ['Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', 'P052', 'serif'],
      humanist:     ['Seravek', 'Gill Sans Nova', 'Ubuntu', 'Calibri', 'DejaVu Sans', 'source-sans-pro', 'sans-serif'],
      geohumanist:  ['Avenir', 'Montserrat', 'Corbel', 'URW Gothic', 'source-sans-pro', 'sans-serif'],
      classhuman:   ['Optima', 'Candara', 'Noto Sans', 'source-sans-pro', 'sans-serif'],
      neogrote:     ['Inter', 'Roboto', 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', 'Arial', 'sans-serif'],
      monoslab:     ['Nimbus Mono PS', 'Courier New', 'monospace'],
      monocode:     ['ui-monospace', 'Cascadia Code', 'Source Code Pro', 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'monospace'],
      industrial:   ['Bahnschrift', 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', 'sans-serif-condensed', 'sans-serif'],
      roundsans:    ['ui-rounded', 'Hiragino Maru Gothic ProN', 'Quicksand', 'Comfortaa', 'Manjari', 'Arial Rounded MT', 'Arial Rounded MT Bold', 'Calibri', 'source-sans-pro', 'sans-serif'],
      slabserif:    ['Rockwell', 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', 'serif'],
      antique:      ['Superclarendon', 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', 'Georgia', 'serif'],
      didone:       ['Didot', 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', 'P052', 'Sylfaen', 'serif'],
      handwritten:  ['Segoe Print', 'Bradley Hand', 'Chilanka', 'TSCu_Comic', 'casual', 'cursive'],
    },
    extend: {},
  }
}

---

Usage

<div class="font-systemui"></div>
<div class="font-transitional"></div>
<div class="font-oldstyle"></div>
<div class="font-neogrote"></div>
etc…