@mixin define-font-family($name, $weight, $style, $filename) { font-family: $name; src: url("../font/woff2/#{$filename}") format("woff2"), url("../font/ttf/#{$filename}") format("ttf"); font-weight: $weight; @if $style { font-style: $style; } } $sans_font: IBMPlexSans; $serif_font: IBMPlexSerif; $mono_font: IBMPlexMono; @font-face { @include define-font-family($sans_font, normal, italic, 'IBMPlexSans-Italic.woff2') } @font-face { @include define-font-family($sans_font, normal, null, 'IBMPlexSans-Regular.woff2') } @font-face { @include define-font-family($sans_font, 200, null, 'IBMPlexSans-Light.woff2') } @font-face { @include define-font-family($sans_font, bold, italic, 'IBMPlexSans-BoldItalic.woff2') } @font-face { @include define-font-family($sans_font, 700, null, 'IBMPlexSans-Medium.woff2') } @font-face { @include define-font-family($sans_font, lighter, italic, 'IBMPlexSans-LightItalic.woff2') } @font-face { @include define-font-family($serif_font, normal, italic, 'IBMPlexSerif-Italic.woff2') } @font-face { @include define-font-family($serif_font, lighter, null, 'IBMPlexSerif-Light.woff2') } @font-face { @include define-font-family($serif_font, lighter, italic, 'IBMPlexSerif-LightItalic.woff2') } @font-face { @include define-font-family($mono_font, normal, null, 'IBMPlexMono-Regular.woff2') } @font-face { @include define-font-family($mono_font, 700, null, 'IBMPlexMono-Medium.woff2') }