What is sass-fonts?

Helper SCSS class to define the typography you use in your project

Installation

You can use inuitcss in your project by installing it using a package manager (recommended):

npm:

$ npm install sass-fonts --save

yarn:

$ yarn add sass-fonts

Getting Started

// SETTINGS
@import 'settings/settings.typography';

// TOOLS
@import 'sass-mq/mq';                     // path depends on project setup
@import 'sass-fonts/tools/tools.family';
@import 'sass-fonts/tools/tools.font-size';
@import 'sass-fonts/tools/tools.typography';

Example for settings.fonts and settings.typography here.

settings.typography.scss

Notes

• $weight is optional and can be excluded
• $weight supports both font-weight integer (e.g. 300 / 700) or full string (e.g. bold / semi-bold)
• params for each breakpoint, e.g. mobile: (font-size, line-height, letter-spacing)

If using Google Fonts

@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');

$overpass-mono: 'Overpass Mono', monospace;

// assign to $fonts map
$fonts: (
  'overpass-mono': $overpass-mono,
);

$typographies: (
  'h1': (
    font: 'overpass-mono',
    weight: 'bold', // or 700
    breakpoints: (
      mobile: (28px, 44px, 0.98px),
      desktop: (36px, 56px, 1.26px)
    ),
  ),
  'p': (
    font: 'overpass-mono',
    breakpoints: (
      mobile: (18px, 30px, 0.6px),
      desktop: (20px, 32px, 0.7px),
    ),
  ),
);

If using Webfonts (FontSquirrel etc)

@font-face {
  font-family: 'muller';
  font-style: normal;
  font-weight: 700;
  src:
    url('../fonts/mullerblack-webfont.woff2') format('woff2'),
    url('../fonts/mullerblack-webfont.woff') format('woff');
}

@font-face {
  font-family: 'muller';
  font-style: normal;
  font-weight: 400;
  src:
    url('../fonts/mullerregular-webfont.woff2') format('woff2'),
    url('../fonts/mullerregular-webfont.woff') format('woff');
}

$muller: 'muller', sans-serif;

// assign to $fonts map
$fonts: (
  'muller': $muller,
);

$typographies: (
  'h1': (
    font: 'muller',
    weight: 'bold', // or 700
    breakpoints: (
      mobile: (28px, 44px, 0.98px),
      desktop: (36px, 56px, 1.26px)
    ),
  ),
  'p': (
    font: 'muller',
    breakpoints: (
      mobile: (18px, 30px, 0.6px),
      desktop: (20px, 32px, 0.7px),
    ),
  ),
);

If using Typekit

@import url('https://use.typekit.net/[typekit_id].css');

$museo-sans: 'museo-sans';

// assign to $fonts map
$fonts: (
  'museo-sans': $museo-sans,
);

$typographies: (
  'h1': (
    font: 'museo-sans',
    weight: 'bold', // or 700
    breakpoints: (
      mobile: (28px, 44px, 0.98px),
      desktop: (36px, 56px, 1.26px)
    ),
  ),
  'p': (
    font: 'museo-sans',
    breakpoints: (
      mobile: (18px, 30px, 0.6px),
      desktop: (20px, 32px, 0.7px),
    ),
  ),
);

If using both Typekit and Google Fonts? We got you.

@import url('https://use.typekit.net/[typekit_id].css');
@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');

$museo-sans: 'museo-sans';
$overpass-mono: 'Overpass Mono', monospace;

// assign to $fonts map
$fonts: (
  'museo-sans': $museo-sans,
  'overpass-mono': $overpass-mono,
);

$typographies: (
  'h1': (
    font: 'museo-sans',
    weight: 'bold',
    breakpoints: (
      mobile: (28px, 44px, 0.98px),
      desktop: (36px, 56px, 1.26px)
    ),
  ),
  'p': (
    font: 'overpass-mono',
    breakpoints: (
      mobile: (18px, 30px, 0.6px),
      desktop: (20px, 32px, 0.7px),
    ),
  ),
);

Easy peasy.

How to use?

There are a few ways to render your CSS using sass-fonts's built in mixins.

sf-typography($tag, $important: false) 2.0.0

h1 {
  @include sf-typography('h1');
}

h2, h3, h4, h5, h6 {
  @include sf-typography('other-heading');
}

// @include sf-typography('h1', true); // forces !important

or if you opt not to set up a $typographies and prefer to set your typography manually, just @include sf-family and @include sf-font-size (released in 2.0.2) which utilizes inuitcss's @include inuit-font-size

sf-family($family, $weight: "regular", $important: false) 2.0.0

h1 {
  @include sf-family('overpass-mono');

  // Other Use Cases
  // @include sf-family('overpass-mono', 'bold');
  // @include sf-family('overpass-mono', 'bold', true); // forces !important
}

sf-font-size($font-size, $line-height, $letter-spacing, $important: false) 2.0.2

Sets the following properties for you: font-size, line-height and letter-spacing. A fallback for browsers that do not support rem will also be provided for font-size.

@include sf-font-size(16px, 24px, 0.5px);
@include sf-font-size(16px, 24px, 0.5px, true); // forces !important

Options for $weight

In v2.0.0 you can now use integers for your font-weight!

| | Font Weight | Default | | ----------- |:-----------:|:--------:| | thin | 100 | | | extra-light | 200 | | | light | 300 | | | regular | 400 | !default | | medium | 500 | | | semi-bold | 600 | | | bold | 700 | | | extra-bold | 800 | | | black | 900 | |

Something not right?

Create a Pull Request or submit an issue so I can fix them!

View our Changelog for recent changes!