Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

$font-family-base: "Roboto";
$font-family-base--lc: roboto;
$font-family-base--fallback: Arial, sans-serif;
$font-family-heading: "Roboto Condensed";
$font-family-heading--lc: robotocondensed;
$font-family-heading--fallback: "Arial Narrow", Arial, sans-serif;
$font-family-section-heading: "painted";
$font-family-section-heading--fallback: $font-family-heading--fallback;
$font-family-section-heading--lc: painted;
$font-family-article-content: "Roboto Slab";
$font-family-article-content--lc: robotoslab;
$font-family-article-content--fallback: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

/// Replace `$search` with `$replace` in `$string`
/// @author Hugo Giraudel
/// @param {String} $string - Initial string
/// @param {String} $search - Substring to replace
/// @param {String} $replace ('') - New value
/// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
  $string: to-lower-case($string);
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@mixin webfont($font-name, $font-weight: null, $font-style: null) {
  // set defaults
  $font-name--lc: str-replace($font-name, " ", "");
  $font-style-code: "n" !default;
  $font-weight-code: 4 !default;
  // set weight if it exists
  @if $font-weight {
    font-weight: $font-weight;
    $font-weight-code: $font-weight / 100;
  }
  // set style if it exists
  @if $font-style {
    font-style: $font-style;
    $font-style-code: "i";
  }
  @if $font-name == $font-family-base {
    font-family: $font-family-base--fallback;
  }
  @if $font-name == $font-family-heading {
    font-family: $font-family-heading--fallback;
  }
  @if $font-name == $font-family-article-content {
    font-family: $font-family-article-content--fallback;
  }
  @if $font-name == $font-family-section-heading {
    font-family: $font-family-section-heading--fallback;
    visibility: hidden;
    .wf-#{$font-name--lc}-#{$font-style-code}#{$font-weight-code}-inactive & {
      visibility: visible;
    }
  }
  // create html class
  .wf-#{$font-name--lc}-#{$font-style-code}#{$font-weight-code}-active & {
    font-family: $font-name;
  }
}

h1, h2, h3, h4, h5, h6 {
  @include webfont($font-family-heading, 700);
}

SassMeister-output.css

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  font-family: "Arial Narrow", Arial, sans-serif;
}

.wf-robotocondensed-n7-active h1, .wf-robotocondensed-n7-active h2, .wf-robotocondensed-n7-active h3, .wf-robotocondensed-n7-active h4, .wf-robotocondensed-n7-active h5, .wf-robotocondensed-n7-active h6 {
  font-family: "Roboto Condensed";
}