Use Font mixin

@mixin use-font()

Helper mixin for the fonts attributes

Parameters & Output

$font-size: (Keyword)

Target font: display, headline, title, subheading, body, button, caption.

$font-weight: (Keyword)

Target weight: bold, regular, light.

{CSS output} (code block)

font-size, font-weight and the line-height of the current font-size.


.block-title {
  @include use-font('title', 'regular');
.block-display {
  @include use-font('display', 'light');
css compiled
.block-title {
  font-size: 21px;
  font-weight: 400;
  line-height: 29px;

.block-display {
  font-size: 72px;
  font-weight: 300;
  line-height: 80px;