for
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.
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: {},
}
}<div class="font-systemui"></div>
<div class="font-transitional"></div>
<div class="font-oldstyle"></div>
<div class="font-neogrote"></div>
etc…On July 6th, 2023, TailwindCSS showcased some ideas about future configuration methods and syntax by which, instead of adding fonts to a "theme" object in the "tailwind.config.js" file, we can add them directly to the source CSS file, using a :theme selector and standard CSS variable declarations.
DO NOT TRY THIS YET. It is not yet implemented in TailwindCSS, and will not work. This is just a preview of what's to come.
:theme {
--font-family-systemui: system-ui, sans-serif;
--font-family-transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
--font-family-oldstyle: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
--font-family-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
--font-family-geohumanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
--font-family-classhuman: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
--font-family-neogrote: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
--font-family-monoslab: 'Nimbus Mono PS', 'Courier New', monospace;
--font-family-monocode: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--font-family-industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
--font-family-roundsans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
--font-family-slabserif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
--font-family-antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
--font-family-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
--font-family-handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
}