language-font.scss

// Karla Regular variable
$font-primary: 'Karla', 'Arial', sans-serif;

// Karla Regular placeholder
%font-primary {
  font-family: $font-primary;
  font-weight: normal;
}

// Karla Bold placeholder
%font-primary--bold {
  font-family: $font-primary;
  font-weight: bold;
}




/* @font-secondary
--------------------------------------------------------

  Font Stack: Proxima Nova

  Secondary font with all variations

  Usage: use serif regular on .btn
  .btn {
    @extend %font-secondary;
  }

  .title {
    @extend %font-secondary--bold;
  }

------------------------------------------------------ */

// Proxima Nova Regular variable
$font-secondary: 'ProximaNova', 'Helvetica', 'Arial', sans-serif;

// Proxima Nova Regular placeholder
%font-secondary {
  font-family: $font-secondary;
  font-weight: normal;
}


// ProximaNova Bold placeholder
%font-secondary--bold {
  font-family: $font-secondary;
  font-weight: bold;
}

// ProximaNova Bold placeholder
%font-secondary--lighter {
  font-family: $font-secondary;
  font-weight: lighter;
}




/* @font-japanese
--------------------------------------------------------

  Font Stack: Karla, ProximaNovaBold, & Localized fonts

  Japanese font with all variations

  Usage: use serif regular on .btn
  .btn {
    @extend %font-japanese;
  }

  .title {
    @extend %font-japanese--bold;
  }

------------------------------------------------------ */

// Karla Regular with localized fallback fonts variable
$font-japanese: 'Karla', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', Meiryo;

// Karla Regular with localized fallback fonts placeholder
%font-japanese {
  font-family: $font-japanese !important;
  font-weight: normal;
}

// ProximaNova Bold with localized fallback fonts placeholder
%font-japanese--bold {
  font-family: $font-japanese !important;
  font-weight: bold;
}




/* @font-korean
--------------------------------------------------------

  Font Stack: Karla, ProximaNovaBold, & Localized fonts

  Korean font with all variations

  Usage: use serif regular on .btn
  .btn {
    @extend %font-korean;
  }

  .title {
    @extend %font-korean--bold;
  }

------------------------------------------------------ */

// Karla Regular with localized fallback fonts variable
$font-korean: 'Karla', 'NanumGothic', sans-serif;

// Karla Regular with localized fallback fonts placeholder
%font-korean {
  font-family: $font-korean !important;
  font-weight: normal;
}

// ProximaNova Bold with localized fallback fonts placeholder
%font-korean--bold {
  font-family: $font-korean !important;
  font-weight: bold;
}




/* @font-wedding
--------------------------------------------------------

  Font Stack: EB Garamond

  wedding font with all variations

  Usage: use serif regular on body and bold on h1
  body {
    @extend %font-wedding;
  }

------------------------------------------------------ */

// EB Garamond Regular variable
$font-wedding: "EB Garamond", "Helvetica", "Arial", sans-serif;

// EB Garamond Regular placeholder
%font-wedding {
  font-family: $font-wedding;
  font-weight: normal;
}


/* @font-weight
--------------------------------------------------------

  Font Weight placeholders.

  Usage: use font weight on .nav__item
  .nav__item {
    @extend %serif--regular;
  }

------------------------------------------------------ */

%font-weight {
  font-weight: 400;
}

%font-weight--bold {
  font-weight: 700;
}






/**

  @language font-face
-----------------------------------------------------------
  _base/_mixin-lang-font.scss
-----------------------------------------------------------

  Use this mixin to specify a different font family on any
  given element when a different language attr is present
  on the html element.
  See imported language fonts in _fonts.scss to view
  acceptable mixin arguments.

  EXAMPLES:
  @include lang-font(japanese, bold);
  @include lang-font(korean);

--------------------------------------------------------- */

@mixin lang-font($language, $weight) {

  $attr: null;

  @if $language == japanese {
    $attr: ja;
  }
  @else if $language == korean {
    $attr: ko;
  }

  // target parent html lang attr
  @if $attr != null {
    html:lang(#{$attr}) & {

      // extend bold font family if bold is passed arg
      @if $weight == bold {
        @extend %font-#{$language}--bold;
      }
      // else extend regular font family
      @else {
        @extend %font-#{$language};
      }
    }
  }
}