$lato-font-path: "~lato-font/fonts"
$roboto-font-path: "~roboto-fontface/fonts/roboto-slab"

@font-face
  font-family: 'Lato'
  src: url('#{$lato-font-path}/lato-normal/lato-normal.woff2') format('woff2'), url('#{$lato-font-path}/lato-normal/lato-normal.woff') format('woff')
  font-weight: 400
  font-style: normal
  font-display: $font-display

@font-face
  font-family: 'Lato'
  src: url('#{$lato-font-path}/lato-bold/lato-bold.woff2') format('woff2'), url('#{$lato-font-path}/lato-bold/lato-bold.woff') format('woff')
  font-weight: 700
  font-style: normal
  font-display: $font-display

@font-face
  font-family: 'Lato'
  src: url('#{$lato-font-path}/lato-bold-italic/lato-bold-italic.woff2') format('woff2'), url('#{$lato-font-path}/lato-bold-italic/lato-bold-italic.woff') format('woff')
  font-weight: 700
  font-style: italic
  font-display: $font-display

@font-face
  font-family: 'Lato'
  src: url('#{$lato-font-path}/lato-normal-italic/lato-normal-italic.woff2') format('woff2'), url('#{$lato-font-path}/lato-normal-italic/lato-normal-italic.woff') format('woff')
  font-weight: 400
  font-style: italic
  font-display: $font-display

@font-face
  font-family: 'Roboto Slab'
  font-style: normal
  font-weight: 400
  src: url('#{$roboto-font-path}/Roboto-Slab-Regular.woff2') format('woff2'), url('#{$roboto-font-path}/Roboto-Slab-Regular.woff') format('woff')
  font-display: $font-display

@font-face
  font-family: 'Roboto Slab'
  font-style: normal
  font-weight: 700
  src: url('#{$roboto-font-path}/Roboto-Slab-Bold.woff2') format('woff2'), url('#{$roboto-font-path}/Roboto-Slab-Bold.woff') format('woff')
  font-display: $font-display