@mixin font-face($family, $file, $weight: normal, $style: normal) {
    @font-face {
        font-family: $family;
        src: url($file);
        font-weight: $weight;
        font-style: $style;
        font-display: swap;
    }
}

// assets/Overpass/static/Overpass-ExtraLight.ttf 
// assets/Overpass/static/Overpass-ExtraLightItalic.ttf 
// assets/Overpass/static/Overpass-Light.ttf 
// assets/Overpass/static/Overpass-LightItalic.ttf 
// assets/Overpass/static/Overpass-Medium.ttf 
// assets/Overpass/static/Overpass-MediumItalic.ttf 
// assets/Overpass/static/Overpass-Italic.ttf 
// assets/Overpass/static/Overpass-Regular.ttf 
// assets/Overpass/static/Overpass-SemiBold.ttf 
// assets/Overpass/static/Overpass-SemiBoldItalic.ttf 
// assets/Overpass/static/Overpass-Thin.ttf 
// assets/Overpass/static/Overpass-ThinItalic.ttf
// assets/Overpass/static/Overpass-Black.ttf 
// assets/Overpass/static/Overpass-BlackItalic.ttf 
// assets/Overpass/static/Overpass-Bold.ttf 
// assets/Overpass/static/Overpass-BoldItalic.ttf 
// assets/Overpass/static/Overpass-ExtraBold.ttf 
// assets/Overpass/static/Overpass-ExtraBoldItalic.ttf
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Thin.ttf', 100);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-ThinItalic.ttf', 100, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-ExtraLight.ttf', 200);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-ExtraLightItalic.ttf', 200, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Light.ttf', 300);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-LightItalic.ttf', 300, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Regular.ttf', 400);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Italic.ttf', 400, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Medium.ttf', 500);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-MediumItalic.ttf', 500, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-SemiBold.ttf', 600);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-SemiBoldItalic.ttf', 600, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Bold.ttf', 700);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-BoldItalic.ttf', 700, italic);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-Black.ttf', 800);
@include font-face("Overpass", '~/assets/Overpass/static/Overpass-BlackItalic.ttf', 800, italic);

// assets/Roboto/Roboto-Black.ttf 
// assets/Roboto/Roboto-BlackItalic.ttf 
// assets/Roboto/Roboto-Bold.ttf 
// assets/Roboto/Roboto-BoldItalic.ttf 
// assets/Roboto/Roboto-Light.ttf 
// assets/Roboto/Roboto-LightItalic.ttf 
// assets/Roboto/Roboto-Medium.ttf 
// assets/Roboto/Roboto-MediumItalic.ttf 
// assets/Roboto/Roboto-Regular.ttf 
// assets/Roboto/Roboto-Italic.ttf 
// assets/Roboto/Roboto-Thin.ttf 
// assets/Roboto/Roboto-ThinItalic.ttf
@include font-face("Roboto", '~/assets/Roboto/Roboto-Black.ttf', 800);
@include font-face("Roboto", '~/assets/Roboto/Roboto-BlackItalic.ttf', 800, italic);
@include font-face("Roboto", '~/assets/Roboto/Roboto-Bold.ttf', 700);
@include font-face("Roboto", '~/assets/Roboto/Roboto-BoldItalic.ttf', 700, italic);
@include font-face("Roboto", '~/assets/Roboto/Roboto-Light.ttf', 300);
@include font-face("Roboto", '~/assets/Roboto/Roboto-LightItalic.ttf', 300, italic);
@include font-face("Roboto", '~/assets/Roboto/Roboto-Medium.ttf', 500);
@include font-face("Roboto", '~/assets/Roboto/Roboto-MediumItalic.ttf', 500, italic);
@include font-face("Roboto", '~/assets/Roboto/Roboto-Regular.ttf', 400);
@include font-face("Roboto", '~/assets/Roboto/Roboto-Italic.ttf', 400, italic);
@include font-face("Roboto", '~/assets/Roboto/Roboto-Thin.ttf', 100);
@include font-face("Roboto", '~/assets/Roboto/Roboto-ThinItalic.ttf', 100, italic);

// 100 – Thin.
// 200 – Extra Light (Ultra Light)
// 300 – Light.
// 400 – Normal.
// 500 – Medium.
// 600 – Semi Bold (Demi Bold)
// 700 – Bold.
// 800 – Extra Bold (Ultra Bold)