@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Ultralight.ttf') format('truetype'), 
        url('woff2/Graphik-Ultralight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Black.ttf') format('truetype'), 
        url('woff2/Graphik-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Thin.ttf') format('truetype'), 
        url('woff2/Graphik-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Heavy.ttf') format('truetype'),
        url('woff2/Graphik-Heavy.woff2') format('woff2') ;
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-UltralightIta.ttf') format('truetype'), 
        url('woff2/Graphik-UltralightIta.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-LightIta.ttf') format('truetype'), 
        url('woff2/Graphik-LightIta.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-BoldIta.ttf') format('truetype'), 
        url('woff2/Graphik-BoldIta.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Ita.ttf') format('truetype'), 
        url('woff2/Graphik-Ita.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-BlackIta.ttf') format('truetype'), 
        url('woff2/Graphik-BlackIta.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-HeavyIta.ttf') format('truetype'), 
        url('woff2/Graphik-HeavyIta.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-RegularIta.ttf') format('truetype'), 
        url('woff2/Graphik-RegularIta.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Bold.ttf') format('truetype'), 
        url('woff2/Graphik-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Medium.ttf') format('truetype'), 
        url('woff2/Graphik-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Regular.ttf') format('truetype'), 
        url('woff2/Graphik-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-ThinIta.ttf') format('truetype'), 
        url('woff2/Graphik-ThinIta.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Light.ttf') format('truetype'), 
        url('woff2/Graphik-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-Semibold.ttf') format('truetype'), 
        url('woff2/Graphik-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik';
    src: url('ttf/Graphik-SemiboldItalic.ttf') format('truetype'), 
        url('woff2/Graphik-SemiboldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
}