@font-face {
    font-family: 'Graphik';  /* Graphik Regular */
    src: url('Graphik-Regular-Web.eot');
    src: url('Graphik-Regular-Web.eot#iefix') format('embedded-opentype'), url('Graphik-Regular-Web.woff') format('woff2'), url('Graphik-Regular-Web.woff') format('woff'), url('Graphik-Regular-Web.ttf') format('truetype');

    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik'; /* Graphik Medium */
    src: url('Graphik-Medium-Web.eot');
    src: url('Graphik-Medium-Web.eot#iefix') format('embedded-opentype'), url('Graphik-Medium-Web.woff') format('woff2'), url('Graphik-Medium-Web.woff') format('woff'), url('Graphik-Medium-Web.ttf') format('truetype');

    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Graphik'; /* Graphik Bold */
    src: url('Graphik-Bold-Web.eot');
    src: url('Graphik-Bold-Web.eot#iefix') format('embedded-opentype'), url('Graphik-Bold-Web.woff') format('woff2'), url('Graphik-Bold-Web.woff') format('woff'), url('Graphik-Bold-Web.ttf') format('truetype');

    font-weight: 700;
    font-style: normal;
}