@font-face {
    font-family: 'Matter';
    src: url('Matter-Light.ttf');
    src: local('Matter-Light'), url('Matter-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-Regular.ttf');
    src: local('Matter-Regular'), url('Matter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-Medium.ttf');
    src: local('Matter-Medium'), url('Matter-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-SemiBold.ttf');
    src: local('Matter-SemiBold'), url('Matter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-Bold.ttf');
    src: local('Matter-Bold'), url('Matter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-Heavy.ttf');
    src: local('Matter-Heavy'), url('Matter-Heavy.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Matter';
    src: url('Matter-LightItalic.ttf');
    src: local('Matter-LightItalic'), url('Matter-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-RegularItalic.ttf');
    src: local('Matter-RegularItalic'), url('Matter-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-MediumItalic.ttf');
    src: local('Matter-MediumItalic'), url('Matter-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-SemiBoldItalic.ttf');
    src: local('Matter-SemiBoldItalic'), url('Matter-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-BoldItalic.ttf');
    src: local('Matter-BoldItalic'), url('Matter-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Matter';
    src: url('Matter-HeavyItalic.ttf');
    src: local('Matter-HeavyItalic'), url('Matter-HeavyItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}