LESS: include fonts mixin

Typography is important but often underappreciated. For this blog I have decided to use the font families Gazpacho by Santi Rey and Candid by Lucas Tillian. Importing a font family in pure CSS is a very tedius and boring task, which becomes even more annoying whenever changes must be made. Luckily in LESS it can be done in a fast and relatively fun way.

This mixin assumes the following directory structure and naming convention is respected

.
├── less
│   └── style.less
└── fonts
    ├── Gazpacho
    |   ├── Regular.woff2
    |   ├── RegularItalic.woff2
    |   ├── Bold.woff2
    |   └── BoldItalic.woff2
    └── Candid
        ├── Regular.woff2
        ├── RegularItalic.woff2
        ├── Standard.woff2
        └── StandardOblique.woff2

Because WOFF2 is widely supported, there is no need to provide other formats

/*
 * Mixin for including custom fonts
 */
@fonts-dir: '../fonts';
@font-serif: Gazpacho;
@font-sans: Candid;
@font-heading: @font-serif, Georgia, serif;
@font-body: @font-sans, Helvetica, sans-serif;

.include-font(@family, @weight, @style, @file-name) {
    @font-face {
        font-family: @family;
        src:url('@{fonts-dir}/@{family}/@{file-name}.woff2') format('woff2');
        font-weight: @weight;
        font-style: @style;
        font-display: swap;
    }
}

.include-font(@font-serif, normal, normal, 'Regular');
.include-font(@font-serif, normal, italic, 'RegularItalic');
.include-font(@font-serif, bold, normal, 'Bold');
.include-font(@font-serif, bold, italic, 'BoldItalic');

.include-font(@font-sans, normal, normal, 'Regular');
.include-font(@font-sans, normal, italic, 'RegularItalic');
.include-font(@font-sans, bold, normal, 'Bold');
.include-font(@font-sans, bold, italic, 'BoldItalic');

This compiles to

@font-face {
  font-family: Gazpacho;
  src: url('../fonts/Gazpacho/Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Gazpacho;
  src: url('../fonts/Gazpacho/RegularItalic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Gazpacho;
  src: url('../fonts/Gazpacho/Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Gazpacho;
  src: url('../fonts/Gazpacho/BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Candid;
  src: url('../fonts/Candid/Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Candid;
  src: url('../fonts/Candid/RegularItalic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Candid;
  src: url('../fonts/Candid/Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Candid;
  src: url('../fonts/Candid/BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}