SCSS – Font Family variables for streamlined styling

Managing typography across a website can be a complex task, especially when dealing with multiple font families. The SCSS snippet below sets up a system of variables for font families, making it easy to maintain and update fonts throughout your site’s stylesheets.

Defining Font Family Variables

$fonts: (
  'text': (
    'name': 'Futura PT',
    'serif': sans-serif
  ),
  'title': (
    'name': 'Futura PT',
  ),
  'quote': (
    'name': 'Playfair Display',
  )
);

This SCSS map $fonts defines a series of font categories (text, title, quote) and assigns each a name, with an optional serif fallback. This structure allows for a clear and organized way to manage your fonts.

Generating Root CSS Variables

@use 'sass:map';

:root {
  @each $font-title, $font-info in $fonts {
    $font-name: map.get($font-info, 'name');
    $font-serif: map.get($font-info, 'serif');
    @if $font-serif {
      --font-#{$font-title}: #{$font-name}, #{$font-serif};
    } @else {
      --font-#{$font-title}: #{$font-name};
    }
  }
}

The :root selector is used to generate CSS variables for each font category. The @each loop iterates over the $fonts map, creating a CSS variable --font-<category> for text, title, and quote. If a serif fallback is specified, it is included in the variable; otherwise, only the primary font name is used.

Benefits of This Approach

• Centralized Font Management: Fonts are defined in one place, making them easy to update or change.
• Reusability: CSS variables can be used throughout the entire stylesheet, ensuring consistency.

By utilizing this SCSS setup, you can ensure that your website’s typography is consistent, maintainable, and easily adaptable to design changes.